API Fullscreen JavaScript

Fullscreen API

The Fullscreen API provides methods and properties to handle full-screen HTML elements.

Example

Display <video> element in full-screen mode:

/* Get the element to be displayed in full-screen */
var elem = document.getElementById("myvideo");
/* Execute the openFullscreen() function to open the video in full-screen. 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(); Cancel the element in full-screen mode.
fullscreenElement Return the element in full-screen mode.
fullscreenEnabled(); If the document can be viewed in full-screen mode, then return true.
requestFullscreen(); Ανοίξτε το στοιχείο σε μορφή πλήρους οθόνης.