Appel à l'action call-to-action

Le panneau Appel à l’action apparaît à la fin de la vidéo et affiche tous les échantillons interactifs associés à la vidéo en question.

Le panneau se compose d’une zone d’en-tête affichant le titre de la vidéo, d’un bouton de relecture dans le coin supérieur droit et d’échantillons interactifs réels affichés sous forme de grille déroulante. Vous pouvez désactiver le panneau à l’aide de l’attribut de configuration callToActionRecap .

Le panneau d’appel à l’action occupe toujours toute la zone de visionneuse disponible.

Le sélecteur de classe CSS suivant contrôle l’apparence de la couleur d’arrière-plan dans le panneau d’appel à l’action :

.s7interactivevideoviewer .s7calltoaction

Propriétés CSS de la couleur d’arrière-plan du panneau d’appel à l’action css-properties-of-the-background-color-of-the-call-to-action-panel

Exemple example

Pour configurer un panneau call to action avec un arrière-plan gris foncé :

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

Le sélecteur de classe CSS suivant contrôle l’aspect de l’en-tête dans le panneau call to action :

.s7interactivevideoviewer .s7calltoaction .s7header

Propriétés CSS de l’en-tête du panneau call to action css-properties-of-the-call-to-action-panel-header

Exemple example-1

Pour configurer un en-tête de 70 pixels de haut, avec un arrière-plan gris foncé et une bordure de deux pixels gris légèrement plus claire le long du bas :

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

Le sélecteur de classe CSS suivant contrôle l’aspect du titre de l’en-tête dans le panneau call to action :

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

Propriétés CSS du titre de l’en-tête dans le panneau call to action : css-properties-of-the-header-title-in-the-call-to-action-panel

Exemple example-2

Pour configurer un titre vidéo avec une hauteur de ligne de 70 pixels, une taille de police de 25 pixels, une couleur blanche et un alignement à gauche :

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

Le sélecteur de classe CSS suivant contrôle l’aspect du bouton Fermer dans le panneau call to action :

.s7interactivevideoviewer .s7calltoaction .s7closebutton

Propriétés CSS du bouton Fermer dans le panneau call to action : css-properties-of-the-close-button-in-the-call-to-action-panel

Exemple example-3

Pour configurer un bouton de relecture de 28 x 28 pixels. Le bouton doit être positionné à 20 pixels du haut et du bord droit de l’en-tête. De plus, il doit afficher une image différente pour chacun des quatre états de bouton différents ; extrait l’illustration de l’image sprite du composant :

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

Le sélecteur de classe CSS suivant contrôle l’apparence de la grille des vignettes dans le panneau Appel à l’action :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

Propriétés CSS de la grille de la vignette dans le panneau Appel à l’action : css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel

Exemple example-4

Pour définir une zone de miniatures avec un arrière-plan gris foncé :

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

Le sélecteur de classe CSS suivant contrôle l’apparence de la cellule miniature dans le panneau Appel à l’action :

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

Propriétés CSS de la cellule miniature dans le panneau d’appel à l’action : css-properties-of-the-thumbcell-in-the-call-to-action-panel

Exemple example-5

Pour définir un espacement horizontal de 24 pixels et un espacement vertical de 18 pixels :

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

Le sélecteur de classe CSS suivant contrôle l’aspect de la miniature dans le panneau call to action :

.s7interactivevideoviewer .s7calltoaction .s7thumb

Propriétés CSS de la miniature dans le panneau call to action : css-properties-of-the-thumbnail-in-the-call-to-action-panel

Exemple example-6

Pour configurer des miniatures de 94 x 100 pixels :

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

Le sélecteur de classe CSS suivant contrôle l’aspect du libellé de la miniature dans le panneau call to action :

.s7interactivevideoviewer .s7calltoaction .s7label

Propriétés CSS du libellé de la miniature dans le panneau call to action : css-properties-of-the-thumbnail-label-in-the-call-to-action-panel

Exemple example-7

Pour configurer des étiquettes qui utilisent une couleur blanche, centrées sur 15 pixels et utilisant une police Arial® :

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

S’il existe plus de miniatures que ne peut en contenir verticalement, les miniatures affichent une barre de défilement verticale sur le côté droit. Par défaut, le panneau call to action affiche une minuscule barre verticale sans boutons de défilement et de pouces. Cependant, il est possible de personnaliser la barre en modifiant le CSS de la visionneuse.

Le sélecteur de classe CSS suivant contrôle l’aspect de la zone de la barre de défilement dans le panneau call to action :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

Propriétés CSS de la zone de la barre de défilement dans le panneau call to action : css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel

Exemple example-8

Pour configurer une barre de défilement d’une largeur de 22 pixels qui n’a aucune marge du haut, de la droite ou du bas de la zone des miniatures :

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

La piste de la barre de défilement est la zone située entre les boutons de la barre de défilement supérieure et inférieure. Le composant définit automatiquement la position et la hauteur de la piste.

Le sélecteur de classe CSS suivant contrôle l’aspect de la barre de défilement dans le panneau call to action :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

Propriétés CSS de la barre de suivi de défilement css-properties-of-the-scroll-track-bar

Exemple example-9

Pour configurer une piste de barre de défilement de 22 pixels de large et de couleur grise :

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

Le pouce de la barre de défilement se déplace verticalement dans la zone de piste de défilement. Sa position verticale est entièrement contrôlée par la logique du composant ; Toutefois, la hauteur de miniature ne change pas dynamiquement en fonction de la quantité de contenu.

Le sélecteur de classe CSS suivant contrôle l’apparence de la hauteur du pouce et d’autres aspects :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Propriétés CSS de la hauteur de miniature dans le panneau d’appel à l’action : css-properties-of-the-thumb-height-in-the-call-to-action-panel

Exemple example-10

Pour configurer une barre de défilement de 6 x 167 pixels avec trois coins arrondis et une couleur grise, procédez comme suit :

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

Le sélecteur de classe CSS suivant contrôle l’aspect des boutons de défilement supérieur et inférieur :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Il n’est pas possible de positionner des boutons de défilement à l’aide des propriétés CSS haut, gauche, bas ou droite ; la logique de la visionneuse les positionne automatiquement. Le panneau call to action de la visionneuse de vidéo interactive n’utilise pas ces boutons dans la barre de défilement. Par conséquent, leur taille est définie sur 0 pixel dans le CSS par défaut.

Propriétés CSS des boutons de défilement supérieur et inférieur dans le panneau call to action : css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel

Les info-bulles des boutons peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur.

Exemple example-11

Désactivez les boutons de défilement en définissant leur taille sur 0 et en les masquant :

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