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.

Check the value of DocumentOrShadowRoot.fullscreenElement to determine whether the change is to full-scren mode or not. If it's null, the document isn't in full-screen mode. If it is not, the value of this property indicates which Element on the page is in 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 not, 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.');
  }
});

Since the fullscreenchange event doesn't include information about whether the change was into or out of full-screen mode, we check the value of DocumentOrShadowRoot.fullscreenElement; if it's null, the document isn't in full-screen mode. Otherwise, it indicates which element is being presented full-screen.

Specifications

Browser compatibility

See also

• fullscreenerror
• Fullscreen API
• Guide to the Fullscreen API