DocumentationGuide de référence des visionneuses Dynamic Media

Bouton Plein écran full-screen-button

Last update: Fri Aug 15 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Développeur
  • Utilisateur ou utilisatrice

Le bouton plein écran fait passer le lecteur vidéo avec recadrage intelligent en mode plein écran ou le quitte lorsqu’un utilisateur clique dessus.

Vous pouvez dimensionner, habiller et positionner le bouton plein écran, par rapport à la barre de contrôle qui le contient, par CSS.

L’apparence du bouton plein écran est contrôlée par le sélecteur de classe CSS :

.s7smartcropvideoviewer .s7fullscreenbutton

Propriétés CSS du bouton plein écran

Retour au début
Position à partir de la bordure supérieure, y compris le rembourrage.
Droite
Position à partir de la bordure droite, y compris le rembourrage.
Gauche
Position à partir de la bordure gauche, remplissage compris.
fond
Position à partir de la bordure inférieure, remplissage compris.
Largeur
Largeur du bouton plein écran.
hauteur
Hauteur du bouton plein écran.
image d’arrière-plan
L’image affichée pour un état de bouton donné.
position de l’arrière-plan

Position à l’intérieur du sprite de l’illustration, si des sprites CSS sont utilisés.

Voir SpritesCSS.

NOTE
Ce bouton prend en charge à la fois les sélecteurs d’attributs state et selected , qui peuvent être utilisés pour appliquer différents habillages à différents états de bouton. En particulier, correspond selected='true' à l’état « plein écran » et selected='false' correspond à l’état « normal ».

L’info-bulle du bouton peut être localisée. Pour plus d’informations, voir Localisation des éléments de l’interface utilisateur.

Exemple section-e8caea0a303c425a8a637c2a47c06355

Pour configurer un bouton plein écran de 32 x 32 pixels et positionné à 6 pixels du bord supérieur et droit de la barre de contrôle. Affichez également une image différente pour chacun des quatre états de bouton différents lorsqu’il est sélectionné ou non.

.s7smartcropvideoviewer . s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7smartcropvideoviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8