Le bouton plein écran permet à la visionneuse d’accéder au mode plein écran ou de quitter ce mode lorsque l’utilisateur clique dessus. Elle est utilisée lorsque la visionneuse affiche la vidéo et se trouve dans la barre de contrôle. Ce bouton ne s’affiche pas si le lecteur fonctionne en mode contextuel et que le système ne prend pas en charge le mode plein écran natif.
Vous pouvez dimensionner, habiller et positionner le bouton plein écran, par rapport à la barre de contrôle qui le contient, par CSS.
L’aspect du bouton plein écran est contrôlé par le sélecteur de classe CSS :
.s7mixedmediaviewer .s7fullscreenbutton
Propriétés CSS du bouton plein écran
haut |
Position à partir de la bordure supérieure, y compris le remplissage. |
droite |
Position à partir de la bordure droite, y compris le remplissage. |
gauche |
Position à partir de la bordure gauche, y compris le remplissage. |
bas |
Position à partir de la bordure inférieure, y compris le remplissage. |
width |
Largeur du bouton plein écran. |
height |
Hauteur du bouton plein écran. |
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 . |
Ce bouton prend en charge les sélecteurs d'attribut state
et selected
, qui peuvent être utilisés pour appliquer différents habillages à différents états de bouton. En particulier, selected='true'
correspond à l’état “plein écran” et selected='false'
correspond à l’état “normal”.
L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
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. En outre, affichez une image différente pour chacun des quatre états de bouton différents lorsqu’il est sélectionné ou non.
.s7mixedmediaviewer . s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7mixedmediaviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}