Our volunteers haven't translated this article into Српски yet. Join us and help get the job done!
You can also read the article in English (US).

The Element interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired when the element has transitioned into or out of full-screen mode.

Syntax

targetDocument.onfullscreenchange = fullscreenChangeHandler;

Value

An event handler for the fullscreenchange event, indicating that the element has changed in or out of full-screen mode.

Example

This example establishes a fullscreenchange event handler, handleFullscreenChange(). This function determines which element it was called on by checking the value of event.target, then compares the document's fullscreenElement value to the element to see if they're the same node.

This gives us a value, isFullscreen, which we pass into a function called adjustMyControls(), which we imagine to be a function that makes adjustments to the app's user interface to present itself optimally when it's in full-screen mode versus being displayed in a window.

function toggleFullscreen() {
  let elem = document.querySelector("video");

  elem.onfullscreenchange = handleFullscreenChange;
  if (!document.fullscreenElement) {
    elem.requestFullscreen().then({}).catch(err => {
      alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
  } else {
    document.exitFullscreen();
  }
}

function handleFullscreenChange(event) {
  let elem = event.target;
  let isFullscreen = document.fullscreenElement === elem;

  adjustMyControls(isFullscreen);
}

Specifications

Specification Status Comment
Fullscreen API
The definition of 'onfullscreenchange' in that specification.
Living Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
onfullscreenchangeChrome Full support 45Edge Full support 12Firefox Full support 64
Full support 64
No support 47 — 65
Disabled
Disabled From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 10 — 65
Alternate Name
Alternate Name Uses the non-standard name: onmozfullscreenchange
IE Full support 11
Alternate Name
Full support 11
Alternate Name
Alternate Name Uses the non-standard name: onMSFullscreenChange
Opera Full support YesSafari ? WebView Android Full support 45Chrome Android Full support 45Edge Mobile ? Firefox Android Full support 64
Full support 64
No support 47 — 65
Disabled
Disabled From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 10 — 65
Alternate Name
Alternate Name Uses the non-standard name: onmozfullscreenchange
Opera Android Full support YesSafari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

See also

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, Sheppy
Last updated by: mdnwebdocs-bot,