Web/API/Fullscreen API

From Get docs


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 the Element that's currently being displayed in full-screen mode on the DOM (or shadow DOM). If this is null, 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 is false 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 a Document 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 a Document 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 returns false.

Note: Use the fullscreenElement property on the Document or ShadowRoot instead; if it's not null, then it's an Element 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 or Element when it transitions into or out of full-screen mode.
fullscreenerror
Sent to a Document or Element 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

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

fullscreen

Deprecated'

Chrome Full support 71


Full support 71


Full support 15

Alternate Name'

Alternate Name' Uses the non-standard name: webkitIsFullscreen

Edge Full support 79


Full support 79


Full support ≤79

Alternate Name'

Alternate Name' Uses the non-standard name: webkitIsFullscreen

Firefox Full support 64


Full support 64


No support 49 — 65

Disabled'

Disabled' From version 49 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 9 — 65

Alternate Name'

Alternate Name' Uses the non-standard name: mozFullScreen

IE

No support No

Opera Full support 58


Full support 58


Full support 15

Alternate Name'

Alternate Name' Uses the non-standard name: webkitIsFullscreen

Safari Full support 6

Alternate Name'

Full support 6

Alternate Name'

Alternate Name' Uses the non-standard name: webkitIsFullScreen

WebView Android Full support 71


Full support 71


Full support ≤37

Alternate Name'

Alternate Name' Uses the non-standard name: webkitIsFullscreen

Chrome Android Full support 71


Full support 71


Full support 18

Alternate Name'

Alternate Name' Uses the non-standard name: webkitIsFullscreen

Firefox Android Full support 64


Full support 64


No support 49 — 65

Disabled'

Disabled' From version 49 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 9 — 65

Alternate Name'

Alternate Name' Uses the non-standard name: mozFullScreen

Opera Android Full support 50


Full support 50


Full support 14

Alternate Name'

Alternate Name' Uses the non-standard name: webkitIsFullscreen

Safari iOS Full support 6

Alternate Name'

Full support 6

Alternate Name'

Alternate Name' Uses the non-standard name: webkitIsFullScreen

Samsung Internet Android Full support 10.0


Full support 10.0


Full support 1.0

Alternate Name'

Alternate Name' Uses the non-standard name: webkitIsFullscreen

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

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
fullscreenElement

Chrome Full support 71


Full support 71


Full support 53

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Edge Full support ≤79


Full support ≤79


Full support ≤18

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit Full support 12

Prefixed'

Prefixed' Implemented with the vendor prefix: ms

Firefox 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 9 — 65

Alternate Name'

Alternate Name' Uses the non-standard name: mozFullScreenElement

IE Full support Yes

Prefixed'

Full support Yes

Prefixed'

Prefixed' Implemented with the vendor prefix: ms

Opera Full support 40

Prefixed'

Full support 40

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Safari Full support Yes

Prefixed'

Full support Yes

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

WebView Android Full support 71


Full support 71


Full support 53

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Chrome Android Full support 71


Full support 71


Full support 53

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

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 9 — 65

Alternate Name'

Alternate Name' Uses the non-standard name: mozFullScreenElement

Opera Android Full support 41

Prefixed'

Full support 41

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Safari iOS Partial support 12

Notes' Alternate Name'

Partial support 12

Notes' Alternate Name'

Notes' Full-screen mode is only supported on the iPad. Alternate Name' Uses the non-standard name: webkitFullscreenElement

Samsung Internet Android Full support 6.0

Prefixed'

Full support 6.0

Prefixed'

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

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
fullscreenEnabled

Chrome Full support 71


Full support 71


Full support Yes

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Edge

Full support 12

Firefox 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: mozFullScreenEnabled

IE Full support 11

Alternate Name'

Full support 11

Alternate Name'

Alternate Name' Uses the non-standard name: msFullscreenEnabled

Opera

Full support Yes

Safari Full support 6

Prefixed'

Full support 6

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

WebView Android Full support 71


Full support 71


Full support Yes

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Chrome Android Full support 71


Full support 71


Full support Yes

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

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: mozFullScreenEnabled

Opera Android

Full support Yes

Safari iOS Full support 6

Prefixed'

Full support 6

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Samsung Internet Android Full support 10.0


Full support 10.0


Full support Yes

Prefixed'

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

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
exitFullscreen

Chrome Full support 71


Full support 71


Full support 15

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Edge

Full support 12

Firefox Full support 64


Full support 64


No support 49 — 65

Disabled'

Disabled' From version 49 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 9 — 65

Alternate Name'

Alternate Name' Uses the non-standard name: mozCancelFullScreen

IE Full support 11

Alternate Name'

Full support 11

Alternate Name'

Alternate Name' Uses the non-standard name: msExitFullscreen

Opera Full support 15

Prefixed'

Full support 15

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Safari Full support 5.1

Prefixed'

Full support 5.1

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

WebView Android Full support 71


Full support 71


Full support ≤37

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Chrome Android Full support 71


Full support 71


Full support 18

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Firefox Android Full support 64


Full support 64


No support 49 — 65

Disabled'

Disabled' From version 49 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 9 — 65

Alternate Name'

Alternate Name' Uses the non-standard name: mozCancelFullScreen

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'

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

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
requestFullscreen

Chrome Full support 71


Full support 71


Full support 15

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Edge Full support 79


Full support 79


Full support 79

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit No support 12 — 14

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Firefox 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 9 — 65

Notes' Alternate Name'

Notes' Before 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. Alternate Name' Uses the non-standard name: mozRequestFullScreen

IE Full support 11

Prefixed'

Full support 11

Prefixed'

Prefixed' Implemented with the vendor prefix: ms

Opera Full support 58


Full support 58


Full support 15

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit No support 12 — 15

Prefixed'

Prefixed' Implemented with the vendor prefix: o

Safari Full support 6

Prefixed'

Full support 6

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

WebView Android Full support 71


Full support 71


Full support ≤37

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

Chrome Android Full support 71


Full support 71


Full support 18

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit

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 9 — 65

Notes' Alternate Name'

Notes' Before 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. Alternate Name' Uses the non-standard name: mozRequestFullScreen

Opera Android Full support 50


Full support 50


Full support 14

Prefixed'

Prefixed' Implemented with the vendor prefix: webkit No support 12 — 14

Prefixed'

Prefixed' Implemented with the vendor prefix: o

Safari iOS Full support 6

Prefixed' Notes'

Full support 6

Prefixed' Notes'

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'

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