The Fullscreen API adds methods to present a specific Element
(and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until full-screen mode is shut off.
See the article Guide to the Fullscreen API for details on how to use the API.
Note: Support for this API varies somewhat across browsers, with many requiring vendor prefixes and/or not implementing the latest specification. See the Browser compatibility section below for details on support for this API. You may wish to consider using a library such as Fscreen for vendor agnostic access to the Fullscreen API.
Interfaces
The Fullscreen API has no interfaces of its own. Instead, it augments several other interfaces to add the methods, properties, and event handlers needed to provide full-screen functionality. These are listed in the following sections.
Methods
The Fullscreen API adds methods to the Document
and Element
interfaces to allow turning off and on full-screen mode.
Methods on the Document interface
Document.exitFullscreen()
- Requests that the user agent switch from full-screen mode back to windowed mode. Returns a
Promise
which is resolved once full-screen mode has been completely shut off.
Methods on the Element interface
Element.requestFullscreen()
- Asks the user agent to place the specified element (and, by extension, its descendants) into full-screen mode, removing all of the browser's UI elements as well as all other applications from the screen. Returns a
Promise
which is resolved once full-screen mode has been activated.
Properties
The Document
interface provides properties that can be used to determine if full-screen mode is supported and available, and if full-screen mode is currently active, which element is using the screen.
DocumentOrShadowRoot.fullscreenElement
- The
fullscreenElement
property tells you theElement
that's currently being displayed in full-screen mode on the DOM (or shadow DOM). If this isnull
, the document is not in full-screen mode. document.fullscreenEnabled
- The
fullscreenEnabled
property tells you whether or not it is possible to engage full-screen mode. This isfalse
if full-screen mode is not available for any reason (such as the"fullscreen"
feature not being allowed, or full-screen mode not being supported).
Event handlers
The Fullscreen API defines two events which can be used to detect when full-screen mode is turned on and off, as well as when errors occur during the process of changing between full-screen and windowed modes. Event handlers for these events are available on the Document
and Element
interfaces.
Note: These event handler properties are not available as HTML content attributes. In other words, you cannot specify event handlers for fullscreenchange
and fullscreenerror
in the HTML content. They must be added by JavaScript code.
Event handlers on documents
Document.onfullscreenchange
- An event handler for the
fullscreenchange
event that's sent to aDocument
when that document is placed into full-screen mode, or when that document exits full-screen mode. This handler is called only when the entire document is presented in full-screen mode. Document.onfullscreenerror
- An event handler for the
fullscreenerror
event that gets sent to aDocument
when an error occurs while trying to enable or disable full-screen mode for the entire document.
Event handlers on elements
Element.onfullscreenchange
- An event handler which is called when the
fullscreenchange
event is sent to the element, indicating that the element has been placed into, or removed from, full-screen mode. Element.onfullscreenerror
- An event handler for the
fullscreenerror
event when sent to an element which has encountered an error while transitioning into or out of full-screen mode.
Obsolete properties
Document.fullscreen
'- A Boolean value which is
true
if the document has an element currently being displayed in full-screen mode; otherwise, this returnsfalse
.Note: Use the
fullscreenElement
property on theDocument
orShadowRoot
instead; if it's notnull
, then it's anElement
currently being displayed in full-screen mode.
Events
The Fullscreen API defines two events which can be used to detect when full-screen mode is turned on and off, as well as when errors occur during the process of changing between full-screen and windowed modes.
fullscreenchange
- Sent to a
Document
orElement
when it transitions into or out of full-screen mode. fullscreenerror
- Sent to a
Document
orElement
if an error occurs while attempting to switch it into or out of full-screen mode.
Dictionaries
FullscreenOptions
- Provides optional settings you can specify when calling
requestFullscreen()
.
Controlling access
The availability of full-screen mode can be controlled using Feature Policy. The full-screen mode feature is identified by the string "fullscreen"
, with a default allow-list value of "self"
, meaning that full-screen mode is permitted in top-level document contexts, as well as to nested browsing contexts loaded from the same origin as the top-most document.
See Using Feature Policy to learn more about using Feature Policy to control access to an API.
Usage notes
Users can choose to exit full-screen mode simply by pressing the ESC (or F11) key, rather than waiting for the site or app to programmatically do so. Make sure you provide, somewhere in your user interface, appropriate user interface elements that inform the user that this option is available to them.
Note: Navigating to another page, changing tabs, or switching to another application using any application switcher (or Alt-Tab) will likewise exit full-screen mode.
Examples
Simple fullscreen usage
In this example, a video is presented in a web page. Pressing the Enter key lets the user toggle between windowed and full-screen presentation of the video.
[[../../../../../../mdn.github.io/dom-examples/fullscreen-api/index|View Live Example]]
Watching for the Enter key
When the page is loaded, this code is run to set up an event listener to watch for the Enter key.
document.addEventListener("keypress", function(e) {
if (e.keyCode === 13) {
toggleFullScreen();
}
}, false);
Toggling full-screen mode
This code is called by the event handler above when the user hits the Enter key.
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
This starts by looking at the value of the document
's fullscreenElement
attribute. In a real-world deployment, at this time, you'll want to check for prefixed versions of this (mozFullScreenElement
, msFullscreenElement
, or webkitFullscreenElement
, for example). If the value is null
, the document is currently in windowed mode, so we need to switch to full-screen mode; otherwise, it's the element that's currently in full-screen mode. Switching to full-screen mode is done by calling Element.requestFullscreen()
on the <video>
element.
If full-screen mode is already active (fullscreenElement
is not null
), we call exitFullscreen()
on the document
to shut off full-screen mode.
Specifications
Specification | Status |
---|---|
Fullscreen API | Living Standard |
Browser compatibility
Document.fullscreen
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome Full support 71 Full support 71 Full support 15 Alternate Name' Uses the non-standard name: |
Edge Full support 79 Full support 79 Full support ≤79 Alternate Name' Uses the non-standard name: |
Firefox Full support 64 Full support 64 No support 49 — 65 Disabled' From version 49 until version 65 (exclusive): this feature is behind the Alternate Name' Uses the non-standard name: |
IE
No support No |
Opera Full support 58 Full support 58 Full support 15 Alternate Name' Uses the non-standard name: |
Safari Full support 6 Full support 6 Alternate Name' Uses the non-standard name: |
WebView Android Full support 71 Full support 71 Full support ≤37 Alternate Name' Uses the non-standard name: |
Chrome Android Full support 71 Full support 71 Full support 18 Alternate Name' Uses the non-standard name: |
Firefox Android Full support 64 Full support 64 No support 49 — 65 Disabled' From version 49 until version 65 (exclusive): this feature is behind the Alternate Name' Uses the non-standard name: |
Opera Android Full support 50 Full support 50 Full support 14 Alternate Name' Uses the non-standard name: |
Safari iOS Full support 6 Full support 6 Alternate Name' Uses the non-standard name: |
Samsung Internet Android Full support 10.0 Full support 10.0 Full support 1.0 Alternate Name' Uses the non-standard name: |
Legend
- Full support
- Full support
- No support
- No support
- Deprecated. Not for use in new websites.'
- Deprecated. Not for use in new websites.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Uses a non-standard name.'
- Uses a non-standard name.
Document.fullscreenElement
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fullscreenElement
|
Chrome Full support 71 Full support 71 Full support 53 Prefixed' Implemented with the vendor prefix: webkit |
Edge Full support ≤79 Full support ≤79 Full support ≤18 Prefixed' Implemented with the vendor prefix: webkit Full support 12 Prefixed' Implemented with the vendor prefix: ms |
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 Yes Full support Yes Prefixed' Implemented with the vendor prefix: ms |
Opera Full support 40 Full support 40 Prefixed' Implemented with the vendor prefix: webkit |
Safari Full support Yes Full support Yes Prefixed' Implemented with the vendor prefix: webkit |
WebView Android Full support 71 Full support 71 Full support 53 Prefixed' Implemented with the vendor prefix: webkit |
Chrome Android Full support 71 Full support 71 Full support 53 Prefixed' Implemented with the vendor prefix: webkit |
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 41 Full support 41 Prefixed' Implemented with the vendor prefix: webkit |
Safari iOS Partial support 12 Partial support 12 Notes' Full-screen mode is only supported on the iPad.
Alternate Name' Uses the non-standard name: |
Samsung Internet Android Full support 6.0 Full support 6.0 Prefixed' Implemented with the vendor prefix: webkit |
Legend
- Full support
- Full support
- Partial support
- Partial support
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Uses a non-standard name.'
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
Document.fullscreenEnabled
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fullscreenEnabled
|
Chrome Full support 71 Full support 71 Full support Yes Prefixed' Implemented with the vendor prefix: webkit |
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 6 Full support 6 Prefixed' Implemented with the vendor prefix: webkit |
WebView Android Full support 71 Full support 71 Full support Yes Prefixed' Implemented with the vendor prefix: webkit |
Chrome Android Full support 71 Full support 71 Full support Yes Prefixed' Implemented with the vendor prefix: webkit |
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 6 Full support 6 Prefixed' Implemented with the vendor prefix: webkit |
Samsung Internet Android Full support 10.0 Full support 10.0 Full support Yes Prefixed' Implemented with the vendor prefix: webkit |
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.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
Document.exitFullscreen
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
exitFullscreen
|
Chrome Full support 71 Full support 71 Full support 15 Prefixed' Implemented with the vendor prefix: webkit |
Edge
Full support 12 |
Firefox Full support 64 Full support 64 No support 49 — 65 Disabled' From version 49 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 15 Full support 15 Prefixed' Implemented with the vendor prefix: webkit |
Safari Full support 5.1 Full support 5.1 Prefixed' Implemented with the vendor prefix: webkit |
WebView Android Full support 71 Full support 71 Full support ≤37 Prefixed' Implemented with the vendor prefix: webkit |
Chrome Android Full support 71 Full support 71 Full support 18 Prefixed' Implemented with the vendor prefix: webkit |
Firefox Android Full support 64 Full support 64 No support 49 — 65 Disabled' From version 49 until version 65 (exclusive): this feature is behind the Alternate Name' Uses the non-standard name: |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android Full support 10.0 Full support 10.0 Full support 1.0 Prefixed' Implemented with the vendor prefix: webkit |
Returns a Promise
|
Chrome
Full support 69 |
Edge
Full support 79 |
Firefox
Full support 64 |
IE
No support No |
Opera
? |
Safari
? |
WebView Android
Full support 69 |
Chrome Android
Full support 69 |
Firefox Android
Full support 64 |
Opera Android
? |
Safari iOS
No support No |
Samsung Internet Android
Full support 10.0 |
Legend
- Full support
- Full support
- No support
- No 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.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
Element.requestFullscreen
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
requestFullscreen
|
Chrome Full support 71 Full support 71 Full support 15 Prefixed' Implemented with the vendor prefix: webkit |
Edge Full support 79 Full support 79 Full support 79 Prefixed' Implemented with the vendor prefix: webkit No support 12 — 14 Prefixed' Implemented with the vendor prefix: webkit |
Firefox Full support 64 Full support 64 No support 47 — 65 Disabled' From version 47 until version 65 (exclusive): this feature is behind the Notes' Before Firefox 44, Firefox incorrectly allowed elements inside a |
IE Full support 11 Full support 11 Prefixed' Implemented with the vendor prefix: ms |
Opera Full support 58 Full support 58 Full support 15 Prefixed' Implemented with the vendor prefix: webkit No support 12 — 15 Prefixed' Implemented with the vendor prefix: o |
Safari Full support 6 Full support 6 Prefixed' Implemented with the vendor prefix: webkit |
WebView Android Full support 71 Full support 71 Full support ≤37 Prefixed' Implemented with the vendor prefix: webkit |
Chrome Android Full support 71 Full support 71 Full support 18 Prefixed' Implemented with the vendor prefix: webkit |
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 Notes' Before Firefox 44, Firefox incorrectly allowed elements inside a |
Opera Android Full support 50 Full support 50 Full support 14 Prefixed' Implemented with the vendor prefix: webkit No support 12 — 14 Prefixed' Implemented with the vendor prefix: o |
Safari iOS Full support 6 Full support 6 Prefixed' Implemented with the vendor prefix: webkit Notes' Only available on iPad, not on iPhone. Shows an overlay button which can not be disabled. |
Samsung Internet Android Full support 10.0 Full support 10.0 Full support 1.0 Prefixed' Implemented with the vendor prefix: webkit |
options parameter
|
Chrome
Full support 71 |
Edge
Full support 79 |
Firefox
Full support 64 |
IE
No support No |
Opera
? |
Safari
? |
WebView Android
Full support 71 |
Chrome Android
Full support 71 |
Firefox Android
Full support 64 |
Opera Android
? |
Safari iOS
? |
Samsung Internet Android
Full support 10.0 |
Returns a Promise
|
Chrome
Full support 69 |
Edge
Full support 79 |
Firefox
Full support 64 |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
Full support 69 |
Chrome Android
Full support 69 |
Firefox Android
Full support 64 |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
Full support 10.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Uses a non-standard name.'
- Uses a non-standard name.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- Using full-screen mode
Element.requestFullscreen()
Document.exitFullscreen()
Document.fullscreen
Document.fullscreenElement
:fullscreen
,::backdrop
allowfullscreen
Fullscreen API by Mozilla Contributors is licensed under CC-BY-SA 2.5.