JavaScript Document fullscreenEnabled Property

What You’ll Learn

Document.fullscreenEnabled is a read-only instance property that tells you whether fullscreen mode is available for this document. Learn how to guard requestFullscreen(), how it differs from fullscreenElement, iframe allowfullscreen rules, and five examples with try-it labs.

Introduction

Before calling element.requestFullscreen(), it helps to know whether the browser will allow it. document.fullscreenEnabled answers that question with a simple true or false.

MDN: the read-only property indicates whether or not fullscreen mode is available. It is part of the Fullscreen API alongside fullscreenElement and the deprecated fullscreen flag.

Related Document tutorials: fullscreenElement, fullscreen, Document constructor.

Understanding Document.fullscreenEnabled

A read-only instance property on Document that reports Fullscreen API availability—not whether fullscreen is currently active.

• Value — true if the document and its elements can enter fullscreen via requestFullscreen(); otherwise false (MDN).
• Plug-ins — MDN: unavailable when the page has windowed plug-ins in any of its documents.
• Containers — MDN: unavailable if a containing element (for example an iframe) lacks the allowfullscreen attribute.
• Lenient setter — assigning does not throw; the write is ignored (MDN).
• Pair with — check before requestFullscreen(); use fullscreenElement to see active state.

📝 Syntax

document.fullscreenEnabled

Value

A boolean: true when fullscreen can be requested; false when it cannot (MDN).

MDN guard example

function requestFullscreen() {
  if (document.fullscreenEnabled) {
    videoElement.requestFullscreen();
  } else {
    console.log("Your browser cannot use fullscreen right now");
  }
}

⚖️ Fullscreen Document Properties

Examples Gallery

Examples follow MDN Document: fullscreenEnabled. On most top-level pages the value is true; embedded contexts may differ.

console.log(document.fullscreenEnabled);
console.log("API available?", document.fullscreenEnabled === true);

true
API available? true

const videoElement = document.querySelector("video");

function requestFullscreen() {
  if (document.fullscreenEnabled) {
    videoElement.requestFullscreen();
  } else {
    console.log("Your browser cannot use fullscreen right now");
  }
}

(video enters fullscreen)

const btn = document.getElementById("fs-btn");

if (!document.fullscreenEnabled) {
  btn.disabled = true;
  btn.title = "Fullscreen is not available in this context";
} else {
  btn.addEventListener("click", () => {
    document.getElementById("stage").requestFullscreen();
  });
}

Button enabled when fullscreenEnabled is true

function reportFullscreenState() {
  return {
    enabled: document.fullscreenEnabled,
    active: document.fullscreenElement !== null,
    element: document.fullscreenElement
  };
}

console.log(reportFullscreenState());

{ enabled: true, active: false, element: null }

function canUseFullscreen() {
  return "fullscreenEnabled" in document && document.fullscreenEnabled;
}

console.log("canUseFullscreen:", canUseFullscreen());

canUseFullscreen: true

🚀 Common Use Cases

• Video players — guard MDN’s requestFullscreen() pattern before expanding video.
• Games / canvases — hide fullscreen buttons when the API is blocked.
• Embedded widgets — detect sandboxed or iframe contexts where MDN says availability may be false.
• Progressive enhancement — offer a windowed fallback when false.
• Diagnostics — log fullscreenEnabled alongside fullscreenElement during debugging.
• Accessibility — explain why a control is disabled instead of failing silently.

📝 Notes

• MDN: Limited availability (not Baseline) — no Deprecated / Experimental / Non-standard banner.
• Unavailable with windowed plug-ins in any document (MDN).
• Containing elements need allowfullscreen (MDN) — common iframe gotcha.
• Setter is a no-operation and is ignored; assigning does not throw (MDN).
• Related: fullscreenElement, fullscreen, Document constructor.

💡 Best Practices