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

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

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

color de fondo
Color de fondo del encabezado.
altura
Altura del encabezado.
borde inferior
Borde inferior del encabezado.

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

color
Color del texto dentro del titular.
tamaño de fuente
Tamaño de fuente.
altura de línea
Altura de línea.
font-family
Familia de fuentes.
alineación de texto
Alineación del texto en el titular.
relleno-izquierdo
Margen izquierdo.
relleno-derecho
Relleno derecho para dejar espacio para el botón Reproducir.

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

principales
Posición desde la parte superior del encabezado, incluido el relleno.
derecho
Posición desde la derecha del encabezado, incluido el relleno.
ancho
Ancho del botón.
altura
Altura del botón.
imagen de fondo
Imagen mostrada para un estado de botón determinado.
posición de fondo

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Ver Sprites CSS.

NOTE
Este botón es compatible con el selector de atributos state, que se puede utilizar para aplicar diferentes aspectos a diferentes estados de botones.

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

color de fondo
Color de fondo del área de miniaturas.

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

margen

Tamaño del margen horizontal y vertical alrededor de cada miniatura.

El espaciado horizontal real de las miniaturas 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.

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

ancho
Ancho de la miniatura.
altura
Altura de la miniatura.
borde
Borde de la miniatura.
NOTE
La miniatura admite el selector de atributos state, que se puede utilizar para aplicar diferentes aspectos a diferentes 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.

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

color
Color de texto de la etiqueta.
alineación de texto
Alineación horizontal de la etiqueta.
font-family
Nombre de la fuente.
tamaño de fuente
Familia de fuentes.

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

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

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

ancho
Ancho de la barra de seguimiento de desplazamiento.
color de fondo
Color de fondo de la barra de seguimiento.

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

ancho
Anchura del pulgar.
altura
Altura del pulgar.
relleno superior
Relleno vertical entre la parte superior de la pista.
relleno inferior
Relleno vertical entre la parte inferior de la pista.
borde-radio
Radio del borde.
color de fondo
Color del pulgar.
imagen de fondo
Imagen mostrada para un estado de miniatura determinado.
posición de fondo

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Ver Sprites CSS.

NOTE
La miniatura admite el selector de atributos state, que se puede utilizar para aplicar distintas apariencias a los siguientes estados de miniatura diferentes: "up", "down", "over" y "disabled".

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

ancho
Ancho del botón.
altura
Altura del botón.
imagen de fondo
Imagen mostrada para un estado de botón determinado.
posición de fondo

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Ver Sprites CSS.

NOTE
Estos botones admiten el selector de atributos state, que se puede utilizar para aplicar diferentes aspectos a los siguientes estados de miniatura diferentes: "up", "down", "over" y "disabled".

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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8