Llamada a acción

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

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

background-color

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

Ejemplo

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

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

background-color

Color de fondo del encabezado.

height

Altura del encabezado.

borde inferior

Borde inferior del encabezado.

Ejemplo

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

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

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 .

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, 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

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

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 .

NOTA

Este botón admite el selector de atributos state, que puede utilizarse para aplicar diferentes aspectos a distintos estados de botones.

Ejemplo

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

Propiedades CSS de la vista de cuadrícula en miniatura en el panel de llamada a la 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 la acción:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

Propiedades CSS de la celda de la miniatura en el panel de llamada a la 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 de los márgenes izquierdo y derecho establecidos 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 la acción:

.s7interactivevideoviewer .s7calltoaction .s7thumb

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

width

Anchura de la miniatura.

height

Altura de la miniatura.

borde

Borde de la miniatura.

NOTA

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.

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

.s7interactivevideoviewer .s7calltoaction .s7label

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

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.

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

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

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.

Ejemplo

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

Propiedades CSS de la barra de seguimiento de desplazamiento

width

Anchura 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 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

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

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 .

NOTA

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".

Ejemplo

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.

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

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 .

NOTA

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.

Ejemplo

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

En esta página