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

colore di sfondo

Colore di sfondo della chiamata 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

colore di sfondo

Colore di sfondo dell’intestazione.

height

Altezza dell'intestazione.

bordo-fondo

Bordo inferiore dell’intestazione.

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:

color

Colore del testo all’interno del banner.

font-size

Dimensione del carattere.

altezza riga

Altezza della linea.

font-family

Famiglia di caratteri.

text-align

Allineamento del testo nel banner.

spaziatura sinistra

Spaziatura a sinistra.

margine destro

Spaziatura a destra per consentire spazio al pulsante Riproduci.

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:

top

Posizione dalla parte superiore dell’intestazione, inclusa la spaziatura.

right

Posizione a destra dell’intestazione, inclusa la spaziatura.

width

Larghezza pulsante.

altezza

Altezza del pulsante.

immagine di sfondo

Immagine visualizzata per un determinato stato del pulsante.

posizione di sfondo

Posizionare all’interno dello sprite dell’immagine, se vengono utilizzati gli spriti CSS.

Consulta Sprite CSS .

NOTA

Questo pulsante supporta il selettore di attributi state , che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.

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 :

colore di sfondo

Colore di sfondo dell’area miniature.

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:

margine

Dimensione del margine orizzontale e verticale intorno a ciascuna miniatura.

La spaziatura orizzontale effettiva delle miniature è uguale alla somma del margine sinistro e destro impostato per .s7thumbcell . La stessa regola si applica anche ma alla spaziatura verticale.

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:

larghezza

Larghezza della miniatura.

altezza

Altezza della miniatura.

border

Bordo della miniatura.

NOTA

La miniatura supporta il selettore di attributi state , che può essere utilizzato per applicare skin diversi a diversi stati di miniatura. In particolare, state="selected" corrisponde alla miniatura dell'immagine attualmente selezionata; state="default" corrisponde alle altre miniature; state="over" viene utilizzato al passaggio del mouse.

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:

color

Colore testo dell'etichetta.

text-align

Allineamento orizzontale dell’etichetta.

font-family

Nome carattere.

font-size

Famiglia di caratteri.

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:

larghezza

Larghezza della barra di scorrimento.

top

Offset barra di scorrimento verticale dalla parte superiore dell'area miniature.

bottom

Offset barra di scorrimento verticale dal fondo dell'area miniature.

right

Offset barra di scorrimento orizzontale dal bordo destro dell'area miniature.

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

larghezza

Larghezza della barra della traccia di scorrimento.

colore di sfondo

Colore di sfondo della barra dei brani.

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:

larghezza

Larghezza del pollice.

altezza

Altezza del pollice.

imbottitura superiore

Spaziatura verticale tra la parte superiore del brano.

imbottitura inferiore

Spaziatura verticale tra il fondo del brano.

raggio bordo

Raggio del bordo.

colore di sfondo

Colore del pollice.

immagine di sfondo

Immagine visualizzata per un dato stato pollice.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Consulta Sprite CSS .

NOTA

Thumb supporta il selettore di attributi state, che può essere utilizzato per applicare skin diversi ai seguenti stati di pollice: "up", "down", "over" e "disabled".

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:

larghezza

Larghezza del pulsante.

altezza

Altezza del pulsante.

immagine di sfondo

Immagine visualizzata per un determinato stato del pulsante.

posizione di sfondo

Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS.

Consulta Sprite CSS .

NOTA

Questi pulsanti supportano il selettore di attributi state , che può essere utilizzato per applicare skin diversi ai seguenti stati del pollice: "up", "down", "over" e "disabled".

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

In questa pagina