Web/API/Fullscreen API/Guide

From Get docs


This article demonstrates how to use the Fullscreen API to place a given element into full-screen mode, as well as how to detect when the browser enters or exits full-screen mode.

Activating full-screen mode

Given an element that you'd like to present in full-screen mode (such as a <video>, for example), you can present it in full-screen mode by simply calling its requestFullscreen() method.

Let's consider this <video> element:

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

We can put that video into full-screen mode as follows:

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

This code checks for the existence of the requestFullscreen() method before calling it.

Presentation differences

It's worth noting a key difference here between the Gecko and WebKit implementations at this time: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "width: 100%; height: 100%". WebKit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black. To get the same fullscreen behavior in WebKit, you need to add your own "width: 100%; height: 100%;" CSS rules to the element yourself:

#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

On the other hand, if you're trying to emulate WebKit's behavior on Gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use CSS rules to adjust the inner element to match the appearance you want.

Notification

When fullscreen mode is successfully engaged, the document which contains the element receives a fullscreenchange event. When fullscreen mode is exited, the document again receives a  fullscreenchange event. Note that the fullscreenchange event doesn't provide any information itself as to whether the document is entering or exiting fullscreen mode, but if the document has a non null fullscreenElement, you know you're in fullscreen mode.

When a fullscreen request fails

It's not guaranteed that you'll be able to switch into fullscreen mode. For example, <iframe> elements have the allowfullscreen attribute in order to opt-in to allowing their content to be displayed in fullscreen mode. In addition, certain kinds of content, such as windowed plug-ins, cannot be presented in fullscreen mode. Attempting to put an element which can't be displayed in fullscreen mode (or the parent or descendant of such an element) won't work. Instead, the element which requested fullscreen will receive a mozfullscreenerror event. When a fullscreen request fails, Firefox will log an error message to the Web Console explaining why the request failed. In Chrome and newer versions of Opera however, no such warning is generated.

Note: Fullscreen requests need to be called from within an event handler or otherwise they will be denied. 


Getting out of full screen mode

The user always has the ability to exit fullscreen mode of their own accord; see Things your users want to know. You can also do so programmatically by calling the Document.exitFullscreen() method.

Other information

The Document provides some additional information that can be useful when developing fullscreen web applications:

DocumentOrShadowRoot.fullscreenElement
The fullscreenElement property tells you the Element that's currently being displayed fullscreen. If this is non-null, the document is in fullscreen mode. If this is null, the document is not in fullscreen mode.
Document.fullscreenEnabled
The fullscreenEnabled property tells you whether or not the document is currently in a state that would allow fullscreen mode to be requested.

Things your users want to know

You'll want to be sure to let your users know that they can press the Esc key (or F11) to exit fullscreen mode.

In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode as well.

Example

In this example, a video is presented in a web page. Pressing the Return or Enter key lets the user toggle between windowed and fullscreen presentation of the video.

View Live Examples

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("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

Toggling fullscreen mode

This code is called when the user hits the Enter key, as seen above.

function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen(); 
    }
  }
}

This starts by looking at the value of the fullscreenElement attribute on the document (checking it prefixed with both moz, ms, or webkit). If it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling element.requestFullscreen().

If fullscreen mode is already active (fullscreenElement is non-null), we call document.exitFullscreen().

Prefixing

Note: Currently, only Firefox 64 and Chrome 71 supports this unprefixed.


For the moment not all browsers are implementing the unprefixed version of the API (for vendor agnostic access to the Fullscreen API you can use Fscreen). Here is the table summarizing the prefixes and name differences between them:

Standard WebKit (Safari) / Blink (Chrome & Opera) / Edge Gecko (Firefox) Internet Explorer
Document.fullscreen  ' webkitIsFullScreen mozFullScreen -
Document.fullscreenEnabled webkitFullscreenEnabled mozFullScreenEnabled msFullscreenEnabled
DocumentOrShadowRoot.fullscreenElement webkitFullscreenElement mozFullScreenElement msFullscreenElement
Document.onfullscreenchange onwebkitfullscreenchange onmozfullscreenchange onmsfullscreenchange
Document.onfullscreenerror onwebkitfullscreenerror onmozfullscreenerror onmsfullscreenerror
Document.exitFullscreen() webkitExitFullscreen() mozCancelFullScreen() msExitFullscreen()
Element.requestFullscreen() webkitRequestFullscreen() mozRequestFullScreen() msRequestFullscreen()

Specifications

Specification Status Comment
Fullscreen API Living Standard Initial version.

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.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.


See also