The Fullscreen API adds methods to present a specific Element (and its descendants) in fullscreen mode, and to exit fullscreen 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 fullscreen mode is shut off.
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 fullscreen functionality. These are listed in the following sections.
Instance methods
The Fullscreen API adds methods to the Document and Element interfaces to allow turning off and on fullscreen mode.
Requests that the user agent switch from fullscreen mode back to windowed mode. Returns a Promise which is resolved once fullscreen mode has been completely shut off.
Asks the user agent to place the specified element (and, by extension, its descendants) into fullscreen 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 fullscreen mode has been activated.
Instance properties
The Document interface provides properties that can be used to determine if fullscreen mode is supported and available, and if fullscreen mode is currently active, which element is using the screen.
The fullscreenElement property tells you the Element that's currently being displayed in fullscreen mode on the DOM (or shadow DOM). If this is null, the document (or shadow DOM) is not in fullscreen mode.
The fullscreenEnabled property tells you whether or not it is possible to engage fullscreen mode. This is false if fullscreen mode is not available for any reason (such as the "fullscreen" feature not being allowed, or fullscreen mode not being supported).
The Fullscreen API defines two events which can be used to detect when fullscreen mode is turned on and off, as well as when errors occur during the process of changing between fullscreen and windowed modes.
Sent to an Element if an error occurs while attempting to switch it into or out of fullscreen mode.
Controlling access
The availability of fullscreen mode can be controlled using a Permissions Policy. The fullscreen mode feature is identified by the string "fullscreen", with a default allowlist value of "self", meaning that fullscreen 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.
Usage notes
Users can choose to exit fullscreen mode 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 fullscreen 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 fullscreen presentation of the video.
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 fullscreen mode; otherwise, it's the element that's currently in fullscreen mode. Switching to fullscreen mode is done by calling Element.requestFullscreen() on the <video> element.
If fullscreen mode is already active (fullscreenElement is not null), we call exitFullscreen() on the document to shut off fullscreen mode.
649Before Firefox 44, Firefox incorrectly allowed elements inside a <frame> or <object> element to request, and to be granted, fullscreen. In Firefox 44 and onwards this has been fixed: only elements in the top-level document or in an <iframe> element with the allowfullscreen attribute can be displayed fullscreen.
11
581512.1–15
16.45.1
71≤37
7118
649Before Firefox 44, Firefox incorrectly allowed elements inside a <frame> or an <object> to request, and to be granted, fullscreen. In Firefox 44 and onwards this has been fixed: only elements in the top-level document or in an <iframe> with the allowfullscreen attribute can be displayed fullscreen.
501412.1–14
12Only available on iPad, not on iPhone. Shows an overlay button which can not be disabled.
10.01.0
options_navigationUI_parameter
71
79
No
No
58
16.4
71
71
No
50
16.4
10.0
options_screen_parameter
100
100
No
No
86
No
No
No
No
No
No
No
returns_promise
71
79
64
No
58
16.4
71
71
64
50
16.4
10.0
Desktop
Mobile
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
WebView Android
Chrome Android
Firefox for Android
Opera Android
Safari on IOS
Samsung Internet
Fullscreen_API
7115
791212–14
649
11
581512.1–15
16.45.1
71≤37
7118
649
501412.1–14
12Only available on iPad, not on iPhone.
10.01.0
returns_promise
69
79
64
No
56
16.4
69
69
64
48
16.4
10.0
Desktop
Mobile
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
WebView Android
Chrome Android
Firefox for Android
Opera Android
Safari on IOS
Samsung Internet
Fullscreen_API
7120
12
6410
11
581512.1–15
16.46
714.4
7125
6410
501412.1–14
12Only available on iPad, not on iPhone.
10.01.5
Desktop
Mobile
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
WebView Android
Chrome Android
Firefox for Android
Opera Android
Safari on IOS
Samsung Internet
Fullscreen_API
7120
791212–14
649
11
581512.1–15
16.46
714.4
7125
649
501412.1–14
16.4Only available on iPad, not on iPhone.12Only available on iPad, not on iPhone.