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 APIThe definition of 'onfullscreenchange' in that specification. | Living Standard | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onfullscreenchange
|
Chrome Full support 71 Full support 71 Full support 45 Alternate Name' Uses the non-standard name: |
Edge
Full support 12 |
Firefox Full support 64 Full support 64 No support 47 — 65 Disabled' From version 47 until version 65 (exclusive): this feature is behind the Alternate Name' Uses the non-standard name: |
IE Full support 11 Full support 11 Alternate Name' Uses the non-standard name: |
Opera
Full support Yes |
Safari Full support 5.1 Full support 5.1 Alternate Name' Uses the non-standard name: |
WebView Android Full support 71 Full support 71 Full support 45 Alternate Name' Uses the non-standard name: |
Chrome Android Full support 71 Full support 71 Full support 45 Alternate Name' Uses the non-standard name: |
Firefox Android Full support 64 Full support 64 No support 47 — 65 Disabled' From version 47 until version 65 (exclusive): this feature is behind the Alternate Name' Uses the non-standard name: |
Opera Android
Full support Yes |
Safari iOS Full support 5.1 Full support 5.1 Alternate Name' Uses the non-standard name: |
Samsung Internet Android
Full support 5.0 |
Legend
- Full support
- Full support
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Uses a non-standard name.'
- Uses a non-standard name.
See also
- Fullscreen API
- Guide to the Fullscreen API
fullscreenchange
Element.onfullscreenerror
- The
Document
equivalent:onfullscreenchange
.
Element.onfullscreenchange by Mozilla Contributors is licensed under CC-BY-SA 2.5.