Appel à l'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 d’appel à l’action

arrière-plan-couleur

Couleur d’arrière-plan du panneau d’appel à l’action.

Exemple

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

arrière-plan-couleur

Couleur d’arrière-plan de l’en-tête.

height

Hauteur de l’en-tête.

border-bottom

Bordure inférieure de l’en-tête.

Exemple

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 :

color

Couleur du texte dans la bannière.

font-size

Taille de police.

line-height

Hauteur de ligne.

font-family

Famille de polices.

alignement de texte

Alignement du texte dans la bannière.

remplissage-gauche

Marge intérieure gauche.

marge intérieure-droite

Marge intérieure droite pour laisser de l’espace pour le bouton Relecture.

Exemple

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 :

haut

Position en haut de l’en-tête, y compris la marge intérieure.

droite

Position à droite de l’en-tête, y compris la marge intérieure.

width

Largeur du bouton.

height

Hauteur du bouton.

background-image

Image affichée pour un état de bouton donné.

arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir CSS Sprites .

REMARQUE

Ce bouton prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

Exemple

Pour configurer un bouton de relecture de 28 x 28 pixels ; positionné à 20 pixels du haut et du bord droit de l’en-tête ; affiche une image différente pour chacun des quatre états de bouton différents ; prend l’illustration à partir 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 :

arrière-plan-couleur

Couleur d’arrière-plan de la zone des miniatures.

Exemple

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 miniature dans le panneau d’appel à l’action :

margin

Taille de la marge horizontale et verticale autour de chaque miniature.

L’espacement réel des miniatures horizontales est égal à la somme des marges gauche et droite définies pour .s7thumbcell . La même règle s'applique également à l'espacement vertical.

Exemple

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 :

width

Largeur de la miniature.

height

Hauteur de la miniature.

bordure

Bordure de la miniature.

REMARQUE

La miniature prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de miniature. En particulier, state="selected" correspond à la miniature de l’image actuellement sélectionnée. state="default" correspond au reste des miniatures ; state="over" est utilisé au survol de la souris.

Exemple

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 :

color

Couleur du texte du libellé.

alignement de texte

Alignement horizontal du libellé.

font-family

Nom de la police.

font-size

Famille de polices.

Exemple

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 :

width

Largeur de la barre de défilement.

haut

Décalage de la barre de défilement verticale par rapport au haut de la zone des miniatures.

bas

Décalage de la barre de défilement vertical par rapport au bas de la zone des miniatures.

droite

Décalage de la barre de défilement horizontale à partir du bord droit de la zone des miniatures.

Exemple

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

width

Largeur de la barre de suivi de défilement.

arrière-plan-couleur

Couleur d’arrière-plan de la barre de suivi.

Exemple

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. cependant, 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 :

width

Largeur du pouce.

height

Hauteur du pouce.

remplissage-top

Marge intérieure verticale entre le haut de la piste.

remplissage-bottom

Marge intérieure verticale entre le bas de la piste.

border-radius

Rayon de la bordure.

arrière-plan-couleur

Couleur du pouce.

background-image

Image affichée pour un état de pouce donné.

arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir CSS Sprites .

REMARQUE

La miniature prend en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages aux différents états de miniature suivants : "up", "down", "over" et "disabled".

Exemple

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 :

width

Largeur du bouton.

height

Hauteur du bouton.

background-image

Image affichée pour un état de bouton donné.

arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir CSS Sprites .

REMARQUE

Ces boutons prennent en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages aux différents états de pouce suivants : "up", "down", "over" et "disabled".

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

Exemple

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

Sur cette page