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.

Syntax

targetDocument.onfullscreenchange = fullscreenChangeHandler;

Value

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

Example

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);
}

Specifications

Browser compatibility

See also

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