The Element.requestFullscreen() method issues an asynchronous request to make the element be displayed in full-screen mode.

It's not guaranteed that the element will be put into full screen mode. If permission to enter full screen mode is granted, the returned Promise will resolve and the element will receive a fullscreenchange event to let it know that it's now in full screen mode. If permission is denied, the promise is rejected and the element receives a fullscreenerror event instead. If the element has been detached from the original document, then the document receives these events instead.

Earlier implementations of the Fullscreen API would always send these events to the document rather than the element, and you may need to be able to handle that situation. Check Browser compatibility in fullscreen for specifics on when each browser made this change.

Note: This method must be called while responding to a user interaction or a device orientation change; otherwise it will fail.

Syntax

var Promise = Element.requestFullscreen(options);

Parameters

options Optional
A FullscreenOptions object  providing options that control the behavior of the transition to full-screen mode. Currently, the only option is navigationUI, which controls whether or not to show navigation UI while the element is in full-screen mode. The default value is "auto", which indicates that the browser should decide what to do.

Return value

A Promise which is resolved with a value of undefined when the transition to full screen is complete.

Exceptions

Rather than throw a traditional exception, the requestFullscreen() procedure announces error conditions by rejecting the Promise it has returned. The rejection handler receives one of the following exception values:

TypeError
The TypeError exception may be delivered in any of the following situations:
  • The document containing the element isn't fully active; that is, it's not the current active document.
  • The element is not contained by a document.
  • The element is not permitted to use the "fullscreen" feature, either because of Feature Policy configuration or other access control features.
  • The element and its document are the same node.

Usage notes

Compatible elements

An element that you wish to place into full-screen mode has to meet a small number of simple requirements:

  • It must be one of the standard HTML elements or <svg> or <math>.
  • It is not a <dialog> element.
  • It must either be located within the top-level document or in an <iframe> which has the allowfullscreen attribute applied to it.

Additionally, of course, the Feature Policy "fullscreen" permission must be granted.

Detecting full-screen activation

You can determine whether or not your attempt to switch to full-screen mode is successful by using the Promise returned by requestFullscreen(), as seen in the Example below.

To learn when other code has toggled full-screen mode on and off, you should establish listeners for the fullscreenchange event on the Document. It's also important to listen for fullscreenchange to be aware when, for example, the user manually toggles full-screen mode, or when the user switches applications, causing your application to temporarily exit full-screen mode.

Example

This function toggles the first <video> element found in the document into and out of full-screen mode.

function toggleFullscreen() {
  let elem = document.querySelector("video");

  if (!document.fullscreenElement) {
    elem.requestFullscreen().then({}).catch(err => {
      alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
    });
  } else {
    document.exitFullscreen();
  }
}

If the document isn't already in full-screen mode—detected by looking to see if document.fullscreenElement has a value—we call the video's requestFullscreen() method. We don't need to do anything special if successful, but if the request fails, our promise's catch() handler presents an alert with an appropriate error message.

If, on the other hand, full-screen mode is already in effect, we call document.exitFullscreen() to disable full-screen mode.

You can see this example in action or view or remix the code on Glitch.

Specifications

Specification Status Comment
Fullscreen API
The definition of 'Element.requestFullscreen()' in that specification.
Living Standard Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Full support 64
Full support 64
Full support 47
Disabled
Disabled From version 47: 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.
Full support 9
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
IE Full support 11
Prefixed
Full support 11
Prefixed
Prefixed Implemented with the vendor prefix: ms
Opera Full support 15
Prefixed
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 Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: webkit
WebView Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Chrome Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge Mobile Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Firefox Android Full support 64
Full support 64
Full support 47
Disabled
Disabled From version 47: 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.
Full support 9
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 14
Prefixed
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 Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Samsung Internet Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Returns a PromiseChrome No support NoEdge No support NoFirefox Full support 64IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 64Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
options parameterChrome Full support 71Edge No support NoFirefox Full support 64IE No support NoOpera ? Safari ? WebView Android Full support 71Chrome Android Full support 71Edge Mobile No support NoFirefox Android Full support 64Opera Android ? Safari iOS ? Samsung Internet Android ?

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