Document: fullscreenchange event

The fullscreenchange event is fired immediately after the browser switches into or out of full-screen mode.

The event is sent to the Element that is transitioning into or out of full-screen mode, and this event then bubbles up to the Document.

To find out whether the Element is entering or exiting full-screen mode, check the value of DocumentOrShadowRoot.fullscreenElement: if this value is null then the element is exiting full-screen mode, otherwise it is entering full-screen mode.

Examples

In this example, a handler for the fullscreenchange event is added to the Document.

document.addEventListener('fullscreenchange', (event) => {
  // document.fullscreenElement will point to the element that
  // is in fullscreen mode if there is one. If there isn't one,
  // the value of the property is null.
  if (document.fullscreenElement) {
    console.log(`Element: ${document.fullscreenElement.id} entered full-screen mode.`);
  } else {
    console.log('Leaving full-screen mode.');
  }
});

See Element: fullscreenchange event for another example.

Specifications

Browser compatibility

See also

• fullscreenerror
• Element: fullscreenchange event
• Fullscreen API
• Guide to the Fullscreen API