/Web APIs

Element: requestFullscreen() method

The Element.requestFullscreen() method issues an asynchronous request to make the element be displayed in fullscreen 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.




options Optional

An object that controls the behavior of the transition to fullscreen mode. The available options are:

Controls whether or not to show navigation UI while the element is in fullscreen mode. The default value is "auto", which indicates that the browser should decide what to do.


The browser's navigation interface will be hidden and the entire dimensions of the screen will be allocated to the display of the element.


The browser will present page navigation controls and possibly other user interface; the dimensions of the element (and the perceived size of the screen) will be clamped to leave room for this user interface.


The browser will choose which of the above settings to apply. This is the default value.

Return value

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


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:


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 Permissions Policy configuration or other access control features.
  • The element and its document are the same node.


Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work.

Usage notes

Compatible elements

An element that you wish to place into fullscreen 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, any set Permissions Policies must allow the use of this feature.

Detecting fullscreen activation

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

To learn when other code has toggled fullscreen 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 fullscreen mode, or when the user switches applications, causing your application to temporarily exit fullscreen mode.


Requesting fullscreen mode

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

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

  if (!document.fullscreenElement) {
    elem.requestFullscreen().catch((err) => {
        `Error attempting to enable fullscreen mode: ${err.message} (${err.name})`
  } else {

If the document isn't already in fullscreen 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, fullscreen mode is already in effect, we call document.exitFullscreen() to disable fullscreen mode.

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

Using navigationUI

In this example, the entire document is placed into fullscreen mode by calling requestFullscreen() on the document's Document.documentElement, which is the document's root <html> element.

let elem = document.documentElement;

  .requestFullscreen({ navigationUI: "show" })
  .then(() => {})
  .catch((err) => {
      `An error occurred while trying to switch into fullscreen mode: ${err.message} (${err.name})`

The promise's resolve handler does nothing, but if the promise is rejected, an error message is displayed by calling alert().


Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
requestFullscreen 7115 791212–14 64
9Before 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 64
9Before 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.
12Only available on iPad, not on iPhone. Shows an overlay button which can not be disabled.
options_navigationUI_parameter 71 79 No No 58 16.4 71 71 No 50 16.4 10.0
returns_promise 71 79 64 No 58 16.4 71 71 64 50 16.4 10.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.