Document: fullscreenchange event

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

The event is sent to the Document which owns the Element which is transitioning into or out of full-screen mode. Another fullscreenchange event will be sent to the Element which is itself transitioning into or out of full-screen mode.

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