Hoe volledig scherm te realiseren

Leer hoe je een volledig schermvenster kunt maken met JavaScript.

volledig scherm venster

Hoe elementen in volledig schermweergave te bekijken met JavaScript.

Klik op de knop om de video in volledig schermweergave te openen:

Probeer het zelf

volledig scherm video

Om een element in volledig scherm te openen, gebruiken we element.requestFullscreen() Methode:

Voorbeeld

<script>
/* Haal het element op dat in volledig schermweergave moet worden weergegeven (in dit voorbeeld een video): */
var elem = document.getElementById("myvideo");
/* Wanneer de functie openFullscreen() wordt uitgevoerd, opent de video in volledig scherm. */
Let op, we moeten voor verschillende browsers voorvoegsels opnemen, omdat ze de methode requestFullscreen nog niet ondersteunen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Probeer het zelf

volledig scherm document

Om de hele pagina in volledig scherm te openen, gebruik dan document.documentElement in plaats van document.getElementById("element").

In dit voorbeeld gebruiken we ook een sluitfunctie om het volledige scherm te verlaten:

Voorbeeld

<script>
/* Verkrijg documentElement (<html>) om de pagina in volledig scherm te tonen */
var elem = document.documentElement;
/* Volledig scherm bekijken */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Verlaat volledig scherm */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

Wanneer de pagina in volledig schermmodus is, kunt u ook CSS gebruiken om de pagina-stijl in te stellen:

Voorbeeld

/* Safari */
:fullscreen {-webkit-full-screen {
  background-color: geel;
}
/* IE11 */
:fullscreen {-ms-fullscreen {
  background-color: geel;
}
/* Standaard syntax */
:fullscreen {
  background-color: geel;
}

Probeer het zelf

Gerelateerde pagina's

HTML DOM referentiemanual:requestFullscreen() methode

HTML DOM referentiemanual:exitFullscreen() methode

HTML DOM referentiemanual:documentElement methode