Appel à l'action call-to-action

Le panneau Appel à l’action s’affiche lorsque la vidéo se termine et affiche tous les échantillons interactifs associés à la vidéo particulière.

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 la forme d’une grille défilante. Vous pouvez désactiver le panneau à l’aide de l’attribut de configuration callToActionRecap.

Le panneau d’appel à l’action prend toujours l’intégralité de la zone de visionneuse disponible.

Le sélecteur de classe CSS suivant contrôle l’aspect 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 Appel à l’action css-properties-of-the-background-color-of-the-call-to-action-panel

Exemple example

Pour configurer un panneau d’appel à l’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 d’appel à l’action :

.s7interactivevideoviewer .s7calltoaction .s7header

Propriétés CSS de l’en-tête du panneau d’appel à l’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 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 d’appel à l’action :

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

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

Exemple example-2

Pour configurer un titre de 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 de fermeture dans le panneau d’appel à l’action :

.s7interactivevideoviewer .s7calltoaction .s7closebutton

Propriétés CSS du bouton de fermeture dans le panneau d’appel à l’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. Il doit également 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’aspect de l’affichage de la grille de miniature dans le panneau d’appel à l’action :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

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

Exemple example-4

Pour configurer 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’aspect de la cellule de pouce dans le panneau d’appel à l’action :

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

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

Exemple example-5

Pour configurer l’espacement horizontal de 24 pixels et l’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 d’appel à l’action :

.s7interactivevideoviewer .s7calltoaction .s7thumb

Propriétés CSS de la miniature dans le panneau d’appel à l’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 d’appel à l’action :

.s7interactivevideoviewer .s7calltoaction .s7label

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

Exemple example-7

Pour configurer des libellés qui utilisent une couleur blanche, positionnez-les de 15 pixels au centre et utilisez 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 celles pouvant s’afficher verticalement, les miniatures affichent une barre de défilement verticale sur le côté droit. Par défaut, le panneau d’appel à l’action affiche une toute petite barre verticale sans boutons de menu déroulant. Il est toutefois possible de personnaliser la barre en modifiant le fichier 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 d’appel à l’action :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

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

Exemple example-8

Pour configurer une barre de défilement de 22 pixels de large et sans 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 barre de défilement est la zone entre les boutons de la barre de défilement supérieure et inférieure. Le composant définit automatiquement la position et la hauteur du suivi.

Le sélecteur de classe CSS suivant contrôle l’aspect du suivi de la barre de défilement dans le panneau d’appel à l’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 d’une couleur grise :

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

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

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

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Propriétés CSS de la hauteur du pouce 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, elle dispose de trois pixels aux coins arrondis et d’une couleur grise :

.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 haut et bas :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Il n’est pas possible de positionner les boutons de défilement à l’aide des propriétés CSS supérieure, gauche, inférieure ou droite ; la logique de la visionneuse les positionne automatiquement. Le panneau d’appel à l’action de la visionneuse de vidéos 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 haut et bas du panneau d’appel à l’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;
}