Fullscreen API Toggle Button — Free requestFullscreen Demo

<section class="fsb-wrap">
  <span class="fsb-tag">fullscreen api · requestfullscreen</span>
  <h1>Fullscreen toggle</h1>
  <p id="fsbStatus">Click the button to request fullscreen for the panel below.</p>

  <div class="fsb-panel" id="fsbPanel">
    <button class="fsb-btn" id="fsbToggle">
      <span id="fsbIcon">⤢</span>
      <span id="fsbLabel">Enter fullscreen</span>
    </button>
    <div class="fsb-content">
      <h2>Demo panel</h2>
      <p>This box becomes the fullscreen element when toggled. Press <kbd>Esc</kbd> to exit — the button updates automatically because it listens for the real <code>fullscreenchange</code> event, not just its own click.</p>
    </div>
  </div>

  <p class="fsb-note" id="fsbNote">If fullscreen is disallowed here (common inside a sandboxed preview iframe without <code>allow="fullscreen"</code>), a manual "simulated fullscreen" mode takes over instead.</p>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(120% 90% at 50% 0%,#0f1b2e,#050a12 60%);color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:26px}
.fsb-wrap{width:100%;max-width:640px;text-align:center}
.fsb-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7dd3fc;background:rgba(125,211,252,.1);border:1px solid rgba(125,211,252,.3);padding:5px 12px;border-radius:99px;margin-bottom:14px}
.fsb-wrap h1{font-size:clamp(28px,6vw,40px);font-weight:800;letter-spacing:-.03em}
.fsb-wrap>p{font-size:14px;color:#9fb4cc;margin-top:8px;line-height:1.6}
.fsb-panel{margin:24px 0 16px;border-radius:16px;border:1px solid rgba(125,211,252,.25);background:#0a121e;padding:22px;position:relative}
.fsb-panel:fullscreen,.fsb-panel:-webkit-full-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#050a12;border-radius:0}
.fsb-panel.fsb-simulated{background:#0d1626;border-color:#38bdf8}
.fsb-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;border:1px solid transparent;background:linear-gradient(135deg,#38bdf8,#818cf8);color:#04121f;font:700 13px system-ui;cursor:pointer;margin-bottom:16px}
.fsb-btn:hover{filter:brightness(1.08)}
.fsb-content h2{font-size:20px;margin-bottom:8px}
.fsb-content p{font-size:13.5px;color:#9fb4cc;line-height:1.7;max-width:440px}
.fsb-content kbd{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:1px 6px;font-size:12px}
.fsb-note{font-size:11.5px;color:#6b7f97;max-width:520px;margin:0 auto;line-height:1.6}

var panel = document.getElementById('fsbPanel');
var toggleBtn = document.getElementById('fsbToggle');
var icon = document.getElementById('fsbIcon');
var label = document.getElementById('fsbLabel');
var statusEl = document.getElementById('fsbStatus');
var noteEl = document.getElementById('fsbNote');

// Vendor-prefixed Fullscreen API surface. Most evergreen browsers support the
// unprefixed API today, but Safari still ships webkit-prefixed variants in
// some contexts, so we resolve whichever methods/properties actually exist.
function fsRequest(el) {
  var fn = el.requestFullscreen || el.webkitRequestFullscreen || el.msRequestFullscreen;
  return fn ? fn.call(el) : Promise.reject(new Error('no requestFullscreen'));
}
function fsExit() {
  var fn = document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen;
  return fn ? fn.call(document) : Promise.reject(new Error('no exitFullscreen'));
}
function fsElement() {
  return document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || null;
}
function fsEnabled() {
  return document.fullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled || false;
}

var simulated = false; // manual fallback mode when the real API is blocked/unsupported

function setUiForFullscreen(isFs) {
  if (isFs) {
    icon.textContent = '⤡';
    label.textContent = 'Exit fullscreen';
    statusEl.textContent = simulated
      ? 'Simulated fullscreen — the panel is enlarged in-page since the real API is unavailable here.'
      : 'Fullscreen active — press Esc or click the button to exit.';
  } else {
    icon.textContent = '⤢';
    label.textContent = 'Enter fullscreen';
    statusEl.textContent = 'Click the button to request fullscreen for the panel below.';
  }
}

// The single source of truth for the button's state is the *real*
// fullscreenchange event, not the click handler's own assumption — because
// the user can also exit fullscreen via Esc, browser chrome, or the OS,
// none of which fire a click on our button.
function onFullscreenChange() {
  var active = fsElement() === panel;
  setUiForFullscreen(active);
}
document.addEventListener('fullscreenchange', onFullscreenChange);
document.addEventListener('webkitfullscreenchange', onFullscreenChange);
document.addEventListener('msfullscreenchange', onFullscreenChange);

function enterSimulated() {
  simulated = true;
  panel.classList.add('fsb-simulated');
  setUiForFullscreen(true);
  noteEl.textContent = 'Real Fullscreen API unavailable or blocked (likely a sandboxed iframe without allow="fullscreen") — using a simulated in-page fullscreen instead.';
}
function exitSimulated() {
  simulated = false;
  panel.classList.remove('fsb-simulated');
  setUiForFullscreen(false);
}

toggleBtn.addEventListener('click', function () {
  if (simulated) { exitSimulated(); return; }

  if (fsElement() === panel) {
    fsExit().catch(function () { exitSimulated(); });
    return;
  }

  if (!fsEnabled()) {
    // fullscreenEnabled is false when the browser/context disallows it
    // outright (e.g. iframe missing the fullscreen permission).
    enterSimulated();
    return;
  }

  fsRequest(panel).catch(function (err) {
    // NotAllowedError / SecurityError etc — commonly thrown inside a
    // sandboxed preview iframe lacking allow="fullscreen". Fail into the
    // simulated mode rather than leaving the button inert.
    enterSimulated();
  });
});