Call to action call-to-action

Il pannello Call to action appare al termine del video e mostra tutti i campioni interattivi associati a quel particolare video.

Il pannello è costituito da un’area di intestazione che mostra il titolo del video, un pulsante di riproduzione nell’angolo in alto a destra e campioni interattivi effettivi visualizzati come griglia scorrevole. È possibile disattivare il pannello utilizzando l'attributo di configurazione callToActionRecap.

Il pannello call to action occupa sempre l’intera area di visualizzazione disponibile.

Il seguente selettore di classe CSS controlla l'aspetto del colore di sfondo nel pannello call to action:

.s7interactivevideoviewer .s7calltoaction

Proprietà CSS del colore di sfondo del pannello call to action css-properties-of-the-background-color-of-the-call-to-action-panel

Esempio example

Per impostare un pannello call to action con sfondo grigio scuro:

.s7interactivevideoviewer .s7calltoaction {
    background-color: #222222;
}

Il seguente selettore di classe CSS controlla l’aspetto dell’intestazione nel pannello call to action:

.s7interactivevideoviewer .s7calltoaction .s7header

Proprietà CSS dell’intestazione del pannello call to action css-properties-of-the-call-to-action-panel-header

Esempio example-1

Per impostare un'intestazione alta 70 pixel, con uno sfondo grigio scuro e un bordo grigio leggermente più chiaro di due pixel lungo il fondo:

.s7interactivevideoviewer .s7calltoaction .s7header {
    height: 70px;
    border-bottom: 2px solid #444444;
    background-color: #222222;
}

Il seguente selettore di classe CSS controlla l’aspetto del titolo dell’intestazione nel pannello call to action:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

Proprietà CSS del titolo dell’intestazione nel pannello call to action: css-properties-of-the-header-title-in-the-call-to-action-panel

Esempio example-2

Per impostare un titolo video con un'altezza della linea di 70 pixel, una dimensione del carattere di 25 pixel, un colore bianco e un allineamento a sinistra:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
    line-height: 70px;
    font-size: 25px;
    color: #ffffff;
    text-align: left;
}

Il seguente selettore di classe CSS controlla l'aspetto del pulsante Chiudi nel pannello call to action:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

Proprietà CSS del pulsante Chiudi nel pannello call to action: css-properties-of-the-close-button-in-the-call-to-action-panel

Esempio example-3

Per impostare un pulsante di riproduzione di 28 x 28 pixel. Il pulsante deve essere posizionato a 20 pixel dal bordo superiore e da quello destro dell’intestazione. Inoltre, deve visualizzare un’immagine diversa per ciascuno dei quattro diversi stati dei pulsanti; prende il disegno dall’immagine di 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;
}

Il seguente selettore di classe CSS controlla l'aspetto della visualizzazione della griglia delle miniature nel pannello call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

Proprietà CSS della visualizzazione griglia miniature nel pannello call to action: css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel

Esempio example-4

Per impostare un'area delle miniature con uno sfondo grigio scuro:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
    background-color: #222222;
}

Il seguente selettore di classe CSS controlla l'aspetto della cella miniatura nel pannello call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

Proprietà CSS della cella miniatura nel pannello call to action: css-properties-of-the-thumbcell-in-the-call-to-action-panel

Esempio example-5

Per impostare la spaziatura orizzontale di 24 pixel e la spaziatura verticale di 18 pixel:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
 margin-top: 9px;
 margin-bottom: 9px;
 margin-left: 12px;
 margin-right: 12px;
}

Il seguente selettore di classe CSS controlla l’aspetto della miniatura nel pannello call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumb

Proprietà CSS della miniatura nel pannello call to action: css-properties-of-the-thumbnail-in-the-call-to-action-panel

Esempio example-6

Per impostare miniature di 94 x 100 pixel:

.s7interactivevideoviewer .s7calltoaction .s7thumb {
 width:94px;
 height:100px;
}

Il seguente selettore di classe CSS controlla l'aspetto dell'etichetta di miniatura nel pannello call to action:

.s7interactivevideoviewer .s7calltoaction .s7label

Proprietà CSS dell’etichetta di miniatura nel pannello call to action: css-properties-of-the-thumbnail-label-in-the-call-to-action-panel

Esempio example-7

Per impostare le etichette che utilizzano un colore bianco, allineate al centro di 15 pixel e utilizzate un carattere Arial®:

.s7interactivevideoviewer .s7calltoaction .s7label {
 text-align: center;
 color: #ffffff;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 15px;
}

Se sono presenti più miniature di quelle che possono essere visualizzate verticalmente, le miniature eseguono il rendering di una barra di scorrimento verticale a destra. Per impostazione predefinita, il pannello call to action esegue il rendering di una piccola barra verticale senza pulsanti di scorrimento e miniatura. Tuttavia, è possibile personalizzare la barra modificando il CSS del visualizzatore.

Il seguente selettore di classe CSS controlla l'aspetto dell'area della barra di scorrimento nel pannello call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

Proprietà CSS dell'area della barra di scorrimento nel pannello call to action: css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel

Esempio example-8

Per impostare una barra di scorrimento larga 22 pixel e priva di margini nella parte superiore, destra o inferiore dell'area delle miniature:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:22px;
}

La traccia della barra di scorrimento è l'area compresa tra i pulsanti della barra di scorrimento superiore e inferiore. Il componente imposta automaticamente la posizione e l'altezza della traccia.

Il seguente selettore di classe CSS controlla l'aspetto della traccia della barra di scorrimento nel pannello call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Proprietà CSS della barra del brano di scorrimento css-properties-of-the-scroll-track-bar

Esempio example-9

Per impostare una traccia della barra di scorrimento larga 22 pixel e di colore grigio:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:22px;
 background-color:#222222;
}

Il pollice della barra di scorrimento si sposta verticalmente all'interno dell'area della traccia di scorrimento. La sua posizione verticale è completamente controllata dalla logica del componente; tuttavia, l’altezza del pollice non cambia in modo dinamico a seconda della quantità di contenuto.

Il seguente selettore di classe CSS controlla l’aspetto dell’altezza del pollice e di altro tipo:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Proprietà CSS dell'altezza del pollice nel pannello call to action: css-properties-of-the-thumb-height-in-the-call-to-action-panel

Esempio example-10

Per impostare una barra di scorrimento di 6 x 167 pixel con tre angoli arrotondati di pixel e un colore grigio:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] {
 width:6px;
 height:167px;
 background-color:#666666;
 background-image:none;
 border-radius:3px 3px 3px 3px;
}

Il seguente selettore di classe CSS controlla l'aspetto dei pulsanti di scorrimento superiore e inferiore:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Non è possibile posizionare i pulsanti di scorrimento utilizzando le proprietà CSS superiore, sinistra, inferiore o destra; la logica di visualizzazione li posiziona automaticamente. Il pannello call to action nel visualizzatore video interattivo non utilizza questi pulsanti nella barra di scorrimento, pertanto le loro dimensioni sono impostate su 0 pixel nel CSS predefinito.

Proprietà CSS dei pulsanti di scorrimento superiore e inferiore nel pannello call to action: css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel

Le descrizioni dei pulsanti possono essere localizzate. Vedi Localizzazione degli elementi dell'interfaccia utente.

Esempio example-11

Disattivare i pulsanti di scorrimento impostandone le dimensioni su 0 e nasconderli:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}