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 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
fullscreenchange eventChrome Full support 57Edge ? Firefox 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 ?

Legend

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

See also