Llamada a acción

El panel Llamada a 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 acción siempre ocupa toda el área del visor disponible.

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

.s7interactivevideoviewer .s7calltoaction

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

background-color

Color de fondo del panel de llamada a acción.

Ejemplo

Para configurar un panel de llamada a 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 acción:

.s7interactivevideoviewer .s7calltoaction .s7header

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

background-color	Color de fondo del encabezado.
height	Altura del encabezado.
border-bottom	Borde inferior del encabezado.

Ejemplo

Para configurar un encabezado de 70 píxeles de alto, con un fondo gris oscuro y un borde de dos píxeles 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 acción:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

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

color	Color del texto dentro del letrero.
font-size	Tamaño de fuente.
line-height	Altura de línea.
font-family	Familia de fuentes.
text-align	Alineación del texto en la pancarta.
relleno-izquierda	Relleno izquierdo.
relleno-derecha	Relleno derecho para permitir espacio para el botón Reproducir.

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, color blanco y 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 acción:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

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

parte superior	Posición desde la parte superior del encabezado, incluido el relleno.
derecha	Posición desde la derecha del encabezado, incluido el relleno.
width	Ancho del botón.
height	Altura del botón.
background-image	Imagen mostrada para un estado de botón determinado.
background-position	Colocar dentro del elemento sprite de ilustración, si se utilizan sprites CSS. Consulte Sprites CSS .

Ejemplo

Para configurar un botón de reproducción de 28 x 28 píxeles; colocado 20 píxeles desde la parte superior y desde el borde derecho del encabezado; muestra una imagen diferente para cada uno de los cuatro estados de botón diferentes; toma la ilustración de la imagen de 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 miniaturas en el panel de llamada a acción:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

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

background-color

Color de fondo del área de miniaturas.

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

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

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

margin

Tamaño del margen horizontal y vertical alrededor de cada miniatura. El espaciado en miniatura horizontal real es igual a la suma del margen izquierdo y derecho establecido para .s7thumbcell . La misma regla también se aplica, pero al espaciado vertical.

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

.s7interactivevideoviewer .s7calltoaction .s7thumb

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

width	Anchura de la miniatura.
height	Altura de la miniatura.
borde	Borde de la miniatura.

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

.s7interactivevideoviewer .s7calltoaction .s7label

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

color	Color del texto de la etiqueta.
text-align	Alineación horizontal de la etiqueta.
font-family	Nombre de fuente.
font-size	Familia de fuentes.

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 se pueden ajustar verticalmente a la vista, las miniaturas representan una barra de desplazamiento vertical en el lado derecho. De forma predeterminada, el panel de llamada a acción procesa una pequeña barra vertical sin botones de desplazamiento ni de desplazamiento. Sin embargo, es posible personalizar la barra modificando la CSS del visor.

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

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

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

width	Ancho de la barra de desplazamiento.
parte superior	Desplazamiento de la barra de desplazamiento vertical desde la parte superior del área de miniaturas.
parte inferior	Desplazamiento de la barra de desplazamiento vertical desde la parte inferior del área de miniaturas.
derecha	Desplazamiento de la barra de desplazamiento horizontal desde el borde derecho del área de miniaturas.

Ejemplo

Para configurar una barra de desplazamiento con una anchura de 22 píxeles y sin 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 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 acción:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Propiedades CSS de la barra de seguimiento de desplazamiento

width	Ancho de la barra de seguimiento de desplazamiento.
background-color	Color de fondo de la barra de seguimiento.

Ejemplo

Para configurar una pista de barra de desplazamiento con una anchura de 22 píxeles 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 del pulgar y otros aspectos:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

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

width	Anchura del pulgar.
height	Altura del pulgar.
padding-top	Relleno vertical entre la parte superior de la pista.
relleno-inferior	Relleno vertical entre la parte inferior de la pista.
border-radius	Radio del borde.
background-color	Color del pulgar.
background-image	Imagen mostrada para un estado de pulgar determinado.
background-position	Colocar dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS .

Ejemplo

Para configurar una miniatura de la 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 las coloca automáticamente. El panel de llamada a 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 el CSS predeterminado.

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

width	Ancho del botón.
height	Altura del botón.
background-image	Imagen mostrada para un estado de botón determinado.
background-position	Colocar dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS .

La información del objeto de botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario.

Ejemplo

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; 
}