Bouton Plein écran

Le bouton plein écran permet au lecteur vidéo d’entrer ou de quitter le mode plein écran 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’aspect du bouton plein écran est contrôlé par le sélecteur de classe CSS :

.s7interactivevideoviewer .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 .

REMARQUE

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.

Exemple

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.

.s7interactivevideoviewer . s7fullscreenbutton { 
top:6px; 
right:6px; 
width:32px; 
height:32px; 
} 
.s7interactivevideoviewer .s7fullscreenbutton [selected='false'][state='up'] { 
background-image:url(images/enterFullBtn_up.png); 
} 
.s7interactivevideoviewer .s7fullscreenbutton [selected='false'][state='over'] {  
background-image:url(images/enterFullBtn_over.png); 
} 
.s7interactivevideoviewer .s7fullscreenbutton [selected='false'][state='down'] {  
background-image:url(images/enterFullBtn_down.png); 
} 
.s7interactivevideoviewer .s7fullscreenbutton [selected='false'][state='disabled'] { 
background-image:url(images/enterFullBtn_disabled.png); 
} 
.s7interactivevideoviewer .s7fullscreenbutton [selected='true'][state='up'] {  
background-image:url(images/exitFullBtn_up.png); 
} 
.s7interactivevideoviewer .s7fullscreenbutton [selected='true'][state='over'] {  
background-image:url(images/exitFullBtn_over.png); 
} 
.s7interactivevideoviewer .s7fullscreenbutton [selected='true'][state='down'] {  
background-image:url(images/exitFullBtn_down.png); 
} 
.s7interactivevideoviewer .s7fullscreenbutton [selected='true'][state='disabled'] {  
background-image:url(images/exitFullBtn_disabled.png); } 
}

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now