Appel à l'action

Le panneau Appel à l’action s’affiche à la fin de la vidéo et affiche toutes les nuances interactives associées à la vidéo en question.

Le panneau se compose d’une zone d’en-tête présentant le titre de la vidéo, d’un bouton de relecture dans le coin supérieur droit et de nuances interactives réelles affichées 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 la totalité de la zone de visualisation 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 grise 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 d’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.

ligne-hauteur

Hauteur de la ligne.

font-family

Famille de polices.

alignement de texte

Alignement du texte dans la bannière.

remplissage-gauche

Marge intérieure gauche.

remplissage-droit

Marge intérieure droite pour laisser de l’espace au bouton Lecture.

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 à partir du haut de l’en-tête, y compris le remplissage.

droite

Position à droite de l’en-tête, y compris le remplissage.

width

Largeur du bouton.

hauteur

Hauteur du bouton.

image d’arrière-plan

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

arrière-plan-position

Positionnez l’objet d’illustration à l’intérieur de l’image-objet, si des images-objets CSS sont utilisées.

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 de l’image d’image-objet 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 la vue de 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 cellule de 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 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 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.

hauteur

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. state="selected" correspond en particulier à la vignette de l’image actuellement sélectionnée ; state="default" correspond au reste des miniatures ; state="over" est utilisé lors du 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 de l’étiquette.

alignement de texte

Alignement horizontal du libellé.

font-family

Nom de la police.

font-size

Famille de polices.

Exemple

Pour configurer des libellés de couleur blanche, aligner le centre sur 15 pixels et utiliser une police Arial :

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

S’il y a plus de miniatures que celles qui peuvent tenir verticalement à la vue, les miniatures génèrent 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 pouce et de défilement. 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 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 à partir du haut de la zone des miniatures.

bas

Décalage de la barre de défilement verticale à partir du bas de la zone des miniatures.

droite

Décalage de la barre de défilement horizontale par rapport au bord droit de la zone des vignettes.

Exemple

Pour configurer une barre de défilement de 22 pixels de large et ne présentant 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 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 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 de couleur grise :

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

Le curseur de 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 des composantes; toutefois, la hauteur du curseur ne change pas de manière dynamique 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’un autre aspect :

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

Propriétés CSS de la hauteur du curseur dans le panneau d’appel à l’action :

width

Largeur du pouce.

hauteur

Hauteur du pouce.

remplissage-haut

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

remplissage-bas

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

border-radius

Rayon de la bordure.

arrière-plan-couleur

Couleur du pouce.

image d’arrière-plan

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

arrière-plan-position

Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés.

Voir CSS Sprites .

REMARQUE

Thumb prend 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".

Exemple

Pour configurer un pouce de barre de défilement de 6 x 167 pixels, avec trois pixels aux coins arrondis et une couleur de gris :

.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 les boutons de défilement à l’aide des propriétés CSS top, left, bottom ou right ; la logique du lecteur 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 supérieur et inférieur dans le panneau d’appel à l’action :

width

Largeur du bouton.

hauteur

Hauteur du bouton.

image d’arrière-plan

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

arrière-plan-position

Positionnez l’objet à l’intérieur de 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