Web/API/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

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`fullscreenchange` event	Chrome Full support 71 Full support 71 Full support 57 Alternate Name' Alternate Name' Uses the non-standard name: `webkitfullscreenchange`	Edge Full support ≤79	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 44	Safari ?	WebView Android Full support 71 Full support 71 Full support 57 Alternate Name' Alternate Name' Uses the non-standard name: `webkitfullscreenchange`	Chrome Android Full support 71 Full support 71 Full support 57 Alternate Name' Alternate Name' Uses the non-standard name: `webkitfullscreenchange`	Firefox 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 43	Safari 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.