Comment réaliser un plein écran

Apprenez à créer une fenêtre plein écran avec JavaScript.

Fenêtre plein écran

Comment afficher des éléments en mode plein écran avec JavaScript.

Cliquez sur le bouton pour ouvrir la vidéo en mode plein écran :

Essayez-le vous-même

video plein écran

Pour ouvrir un élément en mode plein écran, nous utilisons element.requestFullscreen() Méthode :

Exemple

<script>
/* Obtenir l'élément à afficher en mode plein écran (dans cet exemple, une vidéo) : */
var elem = document.getElementById("myvideo");
/* Lorsque la fonction openFullscreen() est exécutée, ouvrir la vidéo en mode plein écran.
Remarque, nous devons inclure des préfixes pour différents navigateurs, car ils ne supportent pas encore la méthode requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Essayez-le vous-même

document.fullscreenEnabled

Pour ouvrir l'ensemble de la page en mode plein écran, utilisez document.documentElement remplace document.getElementById("element")。

Dans cet exemple, nous utilisons également une fonction de fermeture pour quitter le mode plein écran :

Exemple

<script>
/* Obtenir documentElement (<html>) pour afficher la page en plein écran */
var elem = document.documentElement;
/* Vue en plein écran */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Sortir du plein écran */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

Lorsque la page est en mode plein écran, vous pouvez également utiliser CSS pour définir le style de la page :

Exemple

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* Syntaxe standard */
:fullscreen {
  background-color: yellow;
}

Essayez-le vous-même

Pages associées

Manuel de référence HTML DOM :Méthode requestFullscreen()

Manuel de référence HTML DOM :Méthode exitFullscreen()

Manuel de référence HTML DOM :Méthode documentElement