Llamada a acción

El panel Llamada a la acción aparece cuando termina el vídeo y muestra todas las muestras interactivas asociadas al vídeo en particular.

El panel consta de un área de encabezado que muestra el título del vídeo, un botón de reproducción en la esquina superior derecha y muestras interactivas reales que se muestran como una cuadrícula desplazable. Puede deshabilitar el panel mediante el atributo de configuración callToActionRecap.

El panel de llamada a la acción siempre ocupa todo el área de visor disponible.

El siguiente selector de clase CSS controla el aspecto del color de fondo en el panel de llamada a la acción:

.s7interactivevideoviewer .s7calltoaction

Propiedades CSS del color de fondo del panel de llamada a la acción

Ejemplo

Para configurar un panel de llamada a la acción con fondo gris oscuro:

.s7interactivevideoviewer .s7calltoaction { 
    background-color: #222222; 
}

El siguiente selector de clase CSS controla el aspecto del encabezado en el panel de llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7header

Propiedades CSS del encabezado del panel de llamada a la acción

Ejemplo

Para configurar un encabezado de 70 píxeles de altura, con un fondo gris oscuro y un borde de dos píxeles ligeramente más claro a lo largo de la parte inferior:

.s7interactivevideoviewer .s7calltoaction .s7header { 
    height: 70px; 
    border-bottom: 2px solid #444444; 
    background-color: #222222; 
}

El siguiente selector de clase CSS controla el aspecto del título del encabezado en el panel de llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

Propiedades CSS del título del encabezado en el panel de llamada a la acción:

Ejemplo

Para configurar un título de vídeo con una altura de línea de 70 píxeles, un tamaño de fuente de 25 píxeles, un color blanco y una alineación a la izquierda:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title { 
    line-height: 70px; 
    font-size: 25px; 
    color: #ffffff; 
    text-align: left; 
}

El siguiente selector de clase CSS controla el aspecto del botón de cierre en el panel de llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

Propiedades CSS del botón de cierre del panel de llamada a la acción:

Ejemplo

Para configurar un botón de reproducción de 28 x 28 píxeles. El botón debe colocarse a 20 píxeles desde la parte superior y desde el borde derecho del encabezado. Además, debe mostrar una imagen diferente para cada uno de los cuatro estados de botón diferentes. toma la ilustración de la imagen sprite del componente:

.s7interactivevideoviewer .s7calltoaction .s7closebutton { 
 top: 20px; 
 right: 20px; 
 background-size: 336px; 
 width: 28px; 
 height: 28px;  
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state] { 
 background-image: url(images/v2/PlayPauseButton_sprite.png); 
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='up'] { 
 background-position: -28px -1260px; 
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='over'] { 
 background-position: -0px -1260px; 
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='down'] { 
 background-position: -28px -1232px; 
} 
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='disabled'] { 
 background-position: -0px -1232px; 
}

El siguiente selector de clase CSS controla el aspecto de la vista de cuadrícula de miniatura en el panel de llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

Propiedades CSS de la vista de cuadrícula en miniatura en el panel de llamada a la acción:

Ejemplo

Para configurar un área de miniaturas con un fondo gris oscuro:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview { 
    background-color: #222222; 
}

El siguiente selector de clase CSS controla el aspecto de la celda de la miniatura en el panel de llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

Propiedades CSS de la celda de la miniatura en el panel de llamada a la acción:

Ejemplo

Para configurar el espaciado horizontal de 24 píxeles y el espaciado vertical de 18 píxeles:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell { 
 margin-top: 9px; 
 margin-bottom: 9px; 
 margin-left: 12px; 
 margin-right: 12px; 
}

El siguiente selector de clase CSS controla el aspecto de la miniatura en el panel de llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7thumb

Propiedades CSS de la miniatura en el panel de llamada a la acción:

Ejemplo

Para configurar miniaturas de 94 x 100 píxeles:

.s7interactivevideoviewer .s7calltoaction .s7thumb { 
 width:94px; 
 height:100px; 
}

El siguiente selector de clase CSS controla el aspecto de la etiqueta de miniatura en el panel de llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7label

Propiedades CSS de la etiqueta de miniatura en el panel de llamada a la acción:

Ejemplo

Para configurar etiquetas que utilicen un color blanco, alinee el centro 15 píxeles y utilice una fuente Arial®:

.s7interactivevideoviewer .s7calltoaction .s7label { 
 text-align: center; 
 color: #ffffff; 
  font-family: Arial,Helvetica,sans-serif; 
  font-size: 15px; 
}

Si hay más miniaturas de las que pueden caber verticalmente en la vista, las miniaturas representan una barra de desplazamiento vertical en el lado derecho. De forma predeterminada, el panel de llamada a la acción representa una minúscula barra vertical sin botones de desplazamiento ni de desplazamiento. Sin embargo, es posible personalizar la barra modificando el visor CSS.

El siguiente selector de clase CSS controla el aspecto del área de la barra de desplazamiento en el panel de llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

Propiedades CSS del área de la barra de desplazamiento del panel de llamada a la acción:

Ejemplo

Para configurar una barra de desplazamiento de 22 píxeles de ancho y que no tenga ningún margen en la parte superior, derecha o inferior del área de miniaturas:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar { 
 top:0px; 
 bottom:0px; 
 right:0px; 
 width:22px; 
}

La barra de desplazamiento es el área entre los botones de la barra de desplazamiento superior e inferior. El componente establece automáticamente la posición y la altura de la pista.

El siguiente selector de clase CSS controla el aspecto de la barra de desplazamiento en el panel de llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Propiedades CSS de la barra de seguimiento de desplazamiento

Ejemplo

Para configurar una pista de barra de desplazamiento de 22 píxeles de ancho y de color gris:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack { 
 width:22px; 
 background-color:#222222; 
}

La barra de desplazamiento se mueve verticalmente dentro del área de la pista de desplazamiento. Su posición vertical está totalmente controlada por la lógica del componente; sin embargo, la altura de la miniatura no cambia dinámicamente según la cantidad de contenido.

El siguiente selector de clase CSS controla el aspecto de la altura del pulgar y otros aspectos:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Propiedades CSS de la altura de la miniatura en el panel de llamada a la acción:

Ejemplo

Para configurar un control de barra de desplazamiento de 6 x 167 píxeles, tiene tres esquinas redondeadas de píxeles y un color gris:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] { 
 width:6px; 
 height:167px; 
 background-color:#666666; 
 background-image:none; 
 border-radius:3px 3px 3px 3px; 
}

El selector de clase CSS siguiente controla el aspecto de los botones de desplazamiento superior e inferior:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton 
 
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

No es posible colocar botones de desplazamiento utilizando las propiedades CSS arriba, izquierda, abajo o derecha; la lógica del visor los coloca automáticamente. El panel de llamada a la acción del visualizador de vídeo interactivo no utiliza estos botones en la barra de desplazamiento, por lo que su tamaño se establece en 0 píxeles en el CSS predeterminado.

Propiedades CSS de los botones de desplazamiento superior e inferior del panel de llamada a la acción:

La información sobre herramientas de botones se puede localizar. Consulte Localización de los elementos de la interfaz de usuario.

Ejemplo

Desactive los botones de desplazamiento ajustando su tamaño a 0 y ocultándolos:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton { 
 visibility: hidden; 
 width: 0px; 
 height: 0px; 
} 
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton { 
 visibility: hidden; 
 width: 0px; 
 height: 0px; 
}