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
background-color |
Color de fondo del panel de llamada a acción. |
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
background-color |
Color de fondo del encabezado. |
height |
Altura del encabezado. |
border-bottom |
Borde inferior del encabezado. |
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
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. |
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
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 . |
Este botón admite el selector de atributos state
, que se puede utilizar para aplicar diferentes apariencias a distintos estados de botones.
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
background-color |
Color de fondo del área de miniaturas. |
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
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. |
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
width |
Anchura de la miniatura. |
height |
Altura de la miniatura. |
borde |
Borde de la miniatura. |
La miniatura admite el selector de atributos state
, que puede utilizarse para aplicar diferentes apariencias a distintos estados de miniaturas. En particular, state="selected"
corresponde a la miniatura de la imagen seleccionada actualmente; state="default"
corresponde al resto de las miniaturas; state="over"
se utiliza al pasar el ratón por encima.
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
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. |
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
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. |
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
width |
Ancho de la barra de seguimiento de desplazamiento. |
background-color |
Color de fondo de la barra de seguimiento. |
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
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 . |
Thumb admite el selector de atributos state
, que puede utilizarse para aplicar diferentes apariencias a los siguientes estados de pulgar: "up"
, "down"
, "over"
y "disabled"
.
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.
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 . |
Estos botones admiten el selector de atributos state
, que se puede utilizar para aplicar diferentes apariencias a los siguientes estados de pulgar: "up"
, "down"
, "over"
y "disabled"
.
La información del objeto de botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario.
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;
}