Element.onfullscreenchange

The Element interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired when the element has transitioned into or out of full-screen mode.

targetDocument.onfullscreenchange = fullscreenChangeHandler;

An event handler for the fullscreenchange event, indicating that the element has changed in or out of full-screen mode.

This example establishes a fullscreenchange event handler, handleFullscreenChange(). This function determines which element it was called on by checking the value of event.target, then compares the document's fullscreenElement value to the element to see if they're the same node.

This gives us a value, isFullscreen, which we pass into a function called adjustMyControls(), which we imagine to be a function that makes adjustments to the app's user interface to present itself optimally when it's in full-screen mode versus being displayed in a window.

function toggleFullscreen() {
  let elem = document.querySelector("video");

  elem.onfullscreenchange = handleFullscreenChange;
  if (!document.fullscreenElement) {
    elem.requestFullscreen().then({}).catch(err => {
      alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
  } else {
    document.exitFullscreen();
  }
}

function handleFullscreenChange(event) {
  let elem = event.target;
  let isFullscreen = document.fullscreenElement === elem;

  adjustMyControls(isFullscreen);
}

• Fullscreen API
• Guide to the Fullscreen API
• fullscreenchange
• Element.onfullscreenerror
• The Document equivalent: onfullscreenchange.