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
background-color |
Color de fondo del panel de llamada a la acción. |
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
background-color |
Color de fondo del encabezado. |
height |
Altura del encabezado. |
borde inferior |
Borde inferior del encabezado. |
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
color |
Color del texto dentro del banner. |
font-size |
Tamaño de fuente. |
line-height |
Altura de la línea. |
font-family |
Familia de fuentes. |
text-align |
Alineación del texto en el banner. |
relleno-izquierda |
Margen izquierdo. |
relleno-derecha |
Margen 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, 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
parte superior |
Posición desde la parte superior del encabezado, incluido el relleno. |
derecha |
Posición a la derecha del encabezado, incluido el relleno. |
width |
Ancho del botón. |
height |
Altura del botón. |
imagen de fondo |
Imagen mostrada para un estado de botón determinado. |
posición de fondo |
Sitúe el elemento en el elemento Sprite de ilustración si se utilizan sprites CSS. Consulte Sprites CSS . |
Este botón admite el selector de atributos state
, que puede utilizarse para aplicar diferentes aspectos a distintos estados de botones.
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
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 la 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 de los márgenes izquierdo y derecho establecidos 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 la 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 aspectos a diferentes estados de miniaturas. En concreto, state="selected"
corresponde a la miniatura de la imagen seleccionada actualmente; state="default"
corresponde al resto de 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 la acción:
.s7interactivevideoviewer .s7calltoaction .s7label
color |
Color del texto de la etiqueta. |
text-align |
Alineación horizontal de la etiqueta. |
font-family |
Nombre de la 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 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
width |
Anchura de la barra de desplazamiento. |
parte superior |
Desplazamiento vertical de la barra de desplazamiento desde la parte superior del área de miniaturas. |
parte inferior |
Desplazamiento vertical de la barra de desplazamiento 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 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
width |
Anchura 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 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
width |
Anchura del pulgar. |
height |
Altura del pulgar. |
relleno superior |
Margen vertical entre la parte superior de la pista. |
relleno inferior |
Margen vertical entre la parte inferior de la pista. |
border-radius |
Radio del borde. |
background-color |
Color de pulgar. |
imagen de fondo |
Imagen mostrada para un estado de pulgar determinado. |
posición de fondo |
Sitúe 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 aspectos a los siguientes estados de miembros diferentes: "up"
, "down"
, "over"
y "disabled"
.
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.
width |
Anchura del botón. |
height |
Altura del botón. |
imagen de fondo |
Imagen mostrada para un estado de botón determinado. |
posición de fondo |
Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS . |
Estos botones admiten el selector de atributos state
, que puede utilizarse para aplicar diferentes aspectos a los siguientes estados de los bordes inferiores: "up"
, "down"
, "over"
y "disabled"
.
La información sobre herramientas de botones se puede localizar. Consulte Localización de los elementos de la interfaz de usuario.
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;
}