Llamada a acción call-to-action

El panel Llamada a la acción aparece cuando finaliza el vídeo y muestra todas las muestras interactivas asociadas con el vídeo en cuestión.

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 con el atributo de configuración callToActionRecap.

El panel Llamada a la acción siempre ocupa toda 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 css-properties-of-the-background-color-of-the-call-to-action-panel

Ejemplo example

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 llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7header

Propiedades CSS del encabezado del panel de llamada a la acción css-properties-of-the-call-to-action-panel-header

Ejemplo example-1

Para configurar un encabezado con una altura de 70 píxeles, con un fondo gris oscuro y un borde gris ligeramente más claro de dos píxeles 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 llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

Propiedades CSS del título del encabezado en el panel llamada a la acción: css-properties-of-the-header-title-in-the-call-to-action-panel

Ejemplo example-2

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 cerrar en el panel llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

Propiedades CSS del botón Cerrar en el panel Llamada a la acción: css-properties-of-the-close-button-in-the-call-to-action-panel

Ejemplo example-3

Para configurar un botón de reproducción de 28 x 28 píxeles. El botón debe colocarse a 20 píxeles de la parte superior y del 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 en miniatura en el panel llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

Propiedades CSS de la vista de cuadrícula en miniatura del panel llamada a la acción: css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel

Ejemplo example-4

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 llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

Propiedades CSS de la celda de la miniatura en el panel llamada a la acción: css-properties-of-the-thumbcell-in-the-call-to-action-panel

Ejemplo example-5

Para configurar un espaciado horizontal de 24 píxeles y un 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 llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7thumb

Propiedades CSS de la miniatura en el panel llamada a la acción: css-properties-of-the-thumbnail-in-the-call-to-action-panel

Ejemplo example-6

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 llamada a la acción:

.s7interactivevideoviewer .s7calltoaction .s7label

Propiedades CSS de la etiqueta de miniatura en el panel llamada a la acción: css-properties-of-the-thumbnail-label-in-the-call-to-action-panel

Ejemplo example-7

Para configurar etiquetas que utilicen un color blanco, alinearse en el centro con 15 píxeles y utilizar 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 caben verticalmente en la vista, las miniaturas representan una barra de desplazamiento vertical a la derecha. De forma predeterminada, la llamada al panel de acción procesa una pequeña barra vertical sin botones de desplazamiento y miniatura. 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 Llamada a la acción: css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel

Ejemplo example-8

Para configurar una barra de desplazamiento con un ancho de 22 píxeles y sin margen desde la parte superior, derecha o inferior del área de miniaturas:

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

La pista de 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 pista 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 css-properties-of-the-scroll-track-bar

Ejemplo example-9

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

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

El pulgar de 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 de la miniatura y otros aspectos:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Propiedades CSS de la altura de la miniatura en el panel llamada a la acción: css-properties-of-the-thumb-height-in-the-call-to-action-panel

Ejemplo example-10

Para configurar una miniatura 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 siguiente selector de clase CSS 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 mediante las propiedades CSS top, left, bottom o right; la lógica del visor los coloca automáticamente. El panel de llamada a la acción del visor 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 la CSS predeterminada.

Propiedades CSS de los botones de desplazamiento superior e inferior del panel de llamada a la acción: css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel

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

Ejemplo example-11

Desactive los botones de desplazamiento estableciendo su tamaño en 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;
}