Element: fullscreenchange event

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

Bubbles Yes
Cancelable No
Interface Event
Event handler property onfullscreenchange

This event is sent to the Element which is transitioning into or out of full-screen mode.

Examples

In this example, a handler for the fullscreenchange event is added to the element whose ID is fullscreen-div.

If the user clicks on the "Toggle Fullscreen Mode" button, the click handler will toggle full-screen mode for the div. If document.fullscreenElement has a value it will exit full-screen mode. If not, the div will be placed into full-screen mode.

Remember that by the time the fullscreenchange event is handled, the status of the element has already changed. So if the change is to full-screen mode, document.fullscreenElement will point to the element that is now in full-screen mode. On the other hand, if document.fullscreenElement is null, full-screen mode has been canceled.

What that means to the example code is that, if an element is currently in full-screen mode, the fullscreenchange handler logs the id of the full-screen element to the console. If document.fullscreenElement is null, the code logs a message that the change is to leave full-screen mode.

HTML

 <h1>fullscreenchange event example</h1>
 <div id="fullscreen-div">
   <button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
 </div>

JavaScript

document.getElementById('fullscreen-div').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 fullscreen mode.`);
  } else {
    console.log('Leaving full-screen mode.');
  }
});

document.getElementById('toggle-fullscreen').addEventListener('click', (event) => {
  if (document.fullscreenElement) {
    // exitFullscreen is only available on the Document object.
    document.exitFullscreen();
  } else {
    document.getElementById('fullscreen-div').requestFullscreen();
  }
});

Specifications

Specification Status
Fullscreen API Living Standard

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
fullscreenchange eventChrome Full support 57Edge Full support ≤79Firefox Full support 64
Full support 64
No support 10 — 64
Alternate Name
Alternate Name Uses the non-standard name: mozfullscreenchange
IE ? Opera Full support 44Safari ? WebView Android Full support 57Chrome Android Full support 57Firefox Android Full support 64
Full support 64
No support 10 — 64
Alternate Name
Alternate Name Uses the non-standard name: mozfullscreenchange
Opera Android Full support 43Safari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support
Full support
Compatibility unknown
Compatibility unknown
Uses a non-standard name.
Uses a non-standard name.

See also