Invito all'azione

Il pannello Azioni Invito all'azione viene visualizzato al termine del video e visualizza 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. Puoi disabilitare il pannello utilizzando l'attributo di configurazione callToActionRecap .

Il pannello di invito all’azione occupa sempre l’intera area di visualizzazione disponibile.

Il seguente selettore di classe CSS controlla l’aspetto del colore di sfondo nel pannello delle azioni di invito all’azione:

.s7interactivevideoviewer .s7calltoaction

Proprietà CSS del colore di sfondo dell’invito al pannello azioni

Esempio

Per impostare una chiamata al pannello azioni con sfondo grigio scuro:

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

Il seguente selettore di classe CSS controlla l’aspetto dell’intestazione nel pannello di invito all’azione:

.s7interactivevideoviewer .s7calltoaction .s7header

Proprietà CSS della chiamata all’intestazione del pannello azioni

Esempio

Per impostare un'intestazione alta 70 pixel, con uno sfondo grigio scuro e un bordo di due pixel grigio leggermente più chiaro 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 di invito all’azione:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

Proprietà CSS del titolo dell’intestazione nel pannello di invito all’azione:

Esempio

Per impostare un titolo video con un’altezza di 70 pixel, dimensioni del font da 25 pixel, colore bianco e 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 di invito all'azione:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

Proprietà CSS del pulsante Chiudi nel pannello di invito all’azione:

Esempio

Per impostare un pulsante di riproduzione di 28 x 28 pixel. Il pulsante deve essere posizionato a 20 pixel dalla parte superiore e dal bordo destro dell’intestazione. E deve visualizzare un'immagine diversa per ciascuno dei quattro stati del pulsante; prende l’immagine dall’immagine spritica 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 vista della griglia delle miniature nel pannello di chiamata all’azione:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

Proprietà CSS della visualizzazione griglia miniature nel pannello di invito all’azione :

Esempio

Per impostare un’area delle miniature con sfondo grigio scuro:

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

Il seguente selettore di classe CSS controlla l’aspetto della cella miniatura nel pannello di chiamata all’azione :

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

Proprietà CSS della cella miniatura nell’invito al pannello azioni:

Esempio

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 di chiamata all’azione :

.s7interactivevideoviewer .s7calltoaction .s7thumb

Proprietà CSS della miniatura nel pannello di invito all’azione:

Esempio

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 della miniatura nel pannello di chiamata all’azione :

.s7interactivevideoviewer .s7calltoaction .s7label

Proprietà CSS dell’etichetta miniatura nel pannello di invito all’azione:

Esempio

Per impostare le etichette che utilizzano un colore bianco, allinearle al centro a 15 pixel e utilizzare un font 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 riproducono una barra di scorrimento verticale sul lato destro. Per impostazione predefinita, la chiamata al pannello azioni esegue il rendering di una barra verticale minuscola 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 di chiamata all’azione:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

Proprietà CSS dell’area della barra di scorrimento nel pannello di invito all’azione:

Esempio

Per impostare una barra di scorrimento larga 22 pixel e priva di margini dall’alto, a destra o dal basso 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 del brano.

Il seguente selettore di classe CSS controlla l’aspetto del brano della barra di scorrimento nel pannello di chiamata all’azione :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Proprietà CSS della barra della traccia di scorrimento

Esempio

Per impostare una traccia della barra di scorrimento larga 22 pixel e con un 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 della miniatura non cambia dinamicamente a seconda della quantità di contenuto.

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

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Proprietà CSS dell’altezza della miniatura nella chiamata al pannello azioni:

Esempio

Per impostare un pollice della barra di scorrimento di 6 x 167 pixel, ha tre angoli arrotondati per 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 in alto, a sinistra, in basso o a destra; la logica del visualizzatore li posiziona automaticamente. Il pannello delle azioni 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 di invito all’azione:

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

Esempio

Disattiva i pulsanti di scorrimento impostandone le dimensioni su 0 e nascondendoli:

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