JavaScript Element requestFullscreen() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word REQUESTFULLSCREEN

Definition

Element.requestFullscreen() asks the browser to show this element in fullscreen mode (MDN). It returns a Promise that resolves when the transition succeeds, or rejects on denial / error.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.requestFullscreen. Start with this line.

JavaScript
el.requestFullscreen(options?)
CallWhat it does
el.requestFullscreen(options?)Primary signature.
el.requestFullscreen(...)Call with the arguments your case needs.

Built into the browser. Call requestFullscreen(...) on an Element — no import required.

Library declarations
JavaScript
el.requestFullscreen(options?)

Parameters

ParameterDescription
optionsOptional. navigationUI, keyboardLock, screen (MDN)

Return Value

Return ValueDescription
*Promise → undefined on success

JavaScript Examples

Example 1 — Enter Fullscreen on Click

Request fullscreen from a button — catch errors if denied.

JavaScript
const box = document.getElementById("box");
const btn = document.getElementById("go");

btn.addEventListener("click", () => {
  box.requestFullscreen().catch((err) => {
    console.log(err.name, err.message);
  });
});
Try It Yourself

How It Works

  1. User clicks. That satisfies transient activation (MDN).
  2. Call requestFullscreen. Browser asks / enters fullscreen.
  3. Promise resolves when the transition completes.
  4. Catch rejection if policy, iframe, or browser blocks it.

Example 2 — Toggle Enter / Exit (MDN Pattern)

Check fullscreenElement, then request or exit.

JavaScript
const el = document.getElementById("player");

document.getElementById("btn").addEventListener("click", () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
    return;
  }
  el.requestFullscreen().catch((err) => {
    console.error(err.message);
  });
});
Try It Yourself

How It Works

  1. Read document.fullscreenElement. Non-null means something is fullscreen.
  2. If yes: call exitFullscreen() (MDN).
  3. If no: call requestFullscreen() on your element.
  4. Same button can toggle both directions.

Example 3 — navigationUI Option

Ask the browser to keep or hide navigation UI while fullscreen.

JavaScript
const root = document.documentElement;

btn.addEventListener("click", () => {
  root
    .requestFullscreen({ navigationUI: "show" })
    .catch((err) => {
      console.log(err.name, err.message);
    });
});
Try It Yourself

How It Works

  1. Optional object tunes fullscreen behavior (MDN).
  2. navigationUI: "show" asks to keep browser nav chrome.
  3. "hide" prefers a fuller screen for the element.
  4. Default is "auto" — browser decides.
Compatibility

Browser Support

Element.requestFullscreen() is Limited availability on MDN (not Baseline). Desktop support is broad; mobile and embedded contexts vary. See the MDN requestFullscreen() reference.

✓ Limited availability

Element.requestFullscreen()

Async fullscreen request. Feature-detect and handle Promise rejection.

Limited Not Baseline
Google Chrome Yes*
Yes
Microsoft Edge Yes*
Yes
Mozilla Firefox Yes*
Yes
Opera Yes*
Yes
Apple Safari Partial*
Partial
Internet Explorer Prefixes / legacy
Partial
requestFullscreen() Partial

Bottom line: Call from a user gesture. Pair with exitFullscreen / fullscreenElement. Always .catch() failures.

Frequently Asked Questions

It issues an asynchronous request to display the element in fullscreen mode (MDN). It returns a Promise that resolves when the transition completes.
No. MDN does not mark it Deprecated, Experimental, or Non-standard. It is Limited availability (not Baseline) because support varies across browsers.
A Promise that resolves with undefined when fullscreen is active, or rejects if permission is denied or the element is not eligible (MDN).
Yes. MDN: transient user activation is required — call it from a click or key handler, not on page load.
Call document.exitFullscreen(), or let the user press Esc. Check document.fullscreenElement to see what is fullscreen.
fullscreenchange when mode toggles successfully, and fullscreenerror when the request fails (MDN).

Next: requestPointerLock()

Learn how to lock the mouse pointer to an element.

requestPointerLock() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

18 people found this page helpful

JavaScript Element replaceWith() Method JavaScript Element requestPointerLock() Method