DocumentatieNaslaggids voor dynamische mediasviewers

Video, knop Volledig scherm video-full-screen-button

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Ontwikkelaar
  • Gebruiker

De knop Volledig scherm zorgt ervoor dat de viewer de modus Volledig scherm opent of verlaat wanneer deze door de gebruiker is geselecteerd. Deze wordt gebruikt wanneer de viewer video weergeeft en wordt op de besturingsbalk geplaatst. Deze knop wordt niet weergegeven als de viewer werkt in de pop-upmodus en het systeem geen ondersteuning biedt voor een native volledig scherm.

U kunt de grootte, de huid, en de positie van de volledig-schermknoop, met betrekking tot de controlebar die het bevat, door CSS rangschikken.

De weergave van de knop Volledig scherm wordt bepaald door de CSS-klassenkiezer:

.s7mixedmediaviewer .s7fullscreenbutton

CSS eigenschappen van het volledig-schermknoop

top
Positie vanaf de bovenrand, inclusief opvulling.
right
Positie vanaf de rechterrand, inclusief opvulling.
left
Positie vanaf de linkerrand, inclusief opvulling.
bottom
Positie vanaf de onderrand, inclusief opvulling.
width
De breedte van de knop Volledig scherm.
height
De hoogte van de knop Volledig scherm.
background-image
De weergegeven afbeelding voor een bepaalde knopstatus.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie CSS-sprites.

NOTE
Deze knop ondersteunt zowel de state - als selected -kenmerkkiezers, die kunnen worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden. selected='true' komt met name overeen met de status “Volledig scherm” en selected='false' komt overeen met de status “Normaal”.

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​ voor meer informatie.

Voorbeeld section-e8caea0a303c425a8a637c2a47c06355

Aan opstelling een volledig-schermknoop die 32 x 32 pixel is, en geplaatst 6 pixel van de bovenkant en de juiste rand van de controlebar. Geef ook een andere afbeelding weer voor elk van de vier verschillende knoptoestanden, indien geselecteerd of niet.

.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); }
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8