JavaScript Document fullscreenElement Property

What You’ll Learn

Document.fullscreenElement is a read-only instance property that returns the Element currently shown in fullscreen, or null. Learn how it replaces deprecated document.fullscreen, how to detect video fullscreen, toggle with the Fullscreen API, and five examples with try-it labs.

Introduction

When a page expands a video, canvas, or gallery to fill the screen, scripts need two answers: “Is fullscreen on?” and “Which element is fullscreen?” document.fullscreenElement answers both.

MDN: the property returns the Element currently presented in fullscreen mode in this document, or null if fullscreen mode is not in use. It is the modern replacement for the deprecated document.fullscreen Boolean.

Related Document tutorials: fullscreen, fragmentDirective, Document constructor.

Understanding Document.fullscreenElement

A read-only instance property on Document (also available on shadow roots via the same Fullscreen API model).

• Value — fullscreen Element, or null when not in fullscreen (MDN).
• Topmost wins — if multiple elements are fullscreen, the most recently requested is returned (MDN).
• Active check — document.fullscreenElement !== null.
• Lenient setter — assigning does not throw; the write is ignored (MDN).
• Control — enter with element.requestFullscreen(); exit with document.exitFullscreen().

📝 Syntax

document.fullscreenElement

Value

The Element currently in fullscreen mode, or null if fullscreen is not in use (MDN).

MDN video helper

function isVideoInFullscreen() {
  if (document.fullscreenElement?.nodeName === "VIDEO") {
    return true;
  }
  return false;
}

⚖️ Fullscreen Document APIs

Examples Gallery

Examples follow MDN Document: fullscreenElement. Entering fullscreen usually requires a user gesture (button click).

console.log(document.fullscreenElement); // null when not fullscreen
console.log("active?", document.fullscreenElement !== null);

null
active? false

function isVideoInFullscreen() {
  if (document.fullscreenElement?.nodeName === "VIDEO") {
    return true;
  }
  return false;
}

console.log(isVideoInFullscreen());

false

const stage = document.getElementById("stage");

document.getElementById("toggle").addEventListener("click", async () => {
  try {
    if (!document.fullscreenElement) {
      await stage.requestFullscreen();
    } else {
      await document.exitFullscreen();
    }
  } catch (err) {
    console.error(err);
  }
  console.log("now:", document.fullscreenElement);
});

now: <div id="stage">...</div>

function describeFullscreen() {
  const el = document.fullscreenElement;
  if (!el) return "not fullscreen";
  return `${el.tagName}#${el.id || "(no id)"}`;
}

document.addEventListener("fullscreenchange", () => {
  console.log(describeFullscreen());
});

DIV#stage
not fullscreen

document.addEventListener("fullscreenchange", () => {
  console.log("active?", document.fullscreenElement !== null);
});

document.addEventListener("fullscreenerror", (event) => {
  console.error("Could not enter fullscreen", event);
});

active? true
active? false

🚀 Common Use Cases

• Toggle buttons — enter when null, exit when set.
• Video players — detect if the fullscreen target is VIDEO (MDN).
• Games / canvases — confirm which stage element is fullscreen.
• CSS hooks — pair with the :fullscreen pseudo-class for styling.
• Replacing legacy code — migrate from document.fullscreen.
• Accessibility / focus — restore focus when fullscreenElement becomes null.

📝 Notes

• MDN: Limited availability (not Baseline) — no Deprecated / Experimental / Non-standard banner.
• Preferred replacement for deprecated document.fullscreen.
• Setter is a no-operation and is ignored; assigning does not throw (MDN).
• Topmost / most recently requested element wins when multiple exist (MDN).
• Related: fullscreen, fragmentDirective, Document constructor.

💡 Best Practices