Comment - Plein écran
Apprenez à créer une fenêtre plein écran avec JavaScript.
Fenêtre plein écran
Comment utiliser JavaScript pour afficher un élément en mode plein écran.
Cliquez sur le bouton pour ouvrir la vidéo en mode plein écran :
Vidéo plein écran
Pour ouvrir un élément en plein écran, on utilise la element.requestFullscreen()
méthode :
Exemple
<script>
/* Get the element you want displayed in fullscreen mode (a
video in this example): */
var elem = document.getElementById("myvideo");
/* When the openFullscreen() function is executed, open the video in
fullscreen.
Note that we must include prefixes for different browsers, as
they don't support the requestFullscreen method yet */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else
if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
Document plein écran
Pour ouvrir toute la page en plein écran, utilisez le document.documentElement
au lieu de . Dans cet exemple, nous utilisons également une fonction de fermeture pour fermer le plein écran :document.getElementById("element")
Exemple
<script>
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;
/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen)
{ /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
/*
Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen)
{ /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
Vous pouvez également utiliser CSS pour styliser la page lorsqu'elle est en mode plein écran :
Exemple
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
Pages connexes
Référence HTML DOM : La méthode requestFullscreen() .
Référence HTML DOM : La méthode exitFullscreen() .
Référence HTML DOM : La propriété documentElement .