JavaScript Fullscreen API

Fullscreen API

The Fullscreen API provides methods and properties for handling full-screen HTML elements.

Example

Display the <video> element in full-screen mode:

/* Get the element to be displayed in full-screen mode */
var elem = document.getElementById("myvideo");
/* Execute the openFullscreen() function to open the video in full-screen mode. Includes prefixes for browsers that do not support the requestFullscreen property. */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Try It Yourself

Fullscreen Properties and Methods

Property / Method Description
exitFullscreen() Exit the element from full-screen mode.
fullscreenElement Returns the element in full-screen mode.
fullscreenEnabled() If the document can be viewed in full-screen mode, it returns true.
requestFullscreen() Open element in full-screen mode.