Why does fullscreen need a user gesture?

Browsers require a click or keypress to enter fullscreen so pages cannot trap users into a fullscreen state without consent.

What is the difference between requestFullscreen on an element vs the document?

Element-level fullscreen scales just that element (the typical video player). document.documentElement.requestFullscreen takes the whole page fullscreen.

What does fullscreenEnabled tell me?

Whether the document is allowed to enter fullscreen — false inside cross-origin iframes without allow=fullscreen, true otherwise.

Is anything sent over the network?

No. The tool only triggers browser APIs on this page.

fullscreen api · request · exit · events · local

Test the Fullscreen API live

Request fullscreen on a target element or the whole page, watch fullscreenchange events fire, and see fullscreenElement update in real time.

Fullscreen API Tester

Fullscreen

live

Element

—

current

Enabled

yes

browser

Events

recent

input · target

This div will go fullscreen.

output · events (0)

No events yet

Quick Start

How to use Fullscreen API

Fullscreen requests must happen inside a user gesture. The browser fires fullscreenchange on enter, exit, and reparent.

01
Check support
document.fullscreenEnabled tells you if it's allowed.
Inputs are treated as UTF-8 throughout the pipeline and validated client-side as you type — nothing dispatches until the value is well-formed.
checkinpututf-8client-sidevalidated
support · texty/n · set
```
fullscreenEnabled = true
```
loaded · parsedclient-side
02
Request
Call el.requestFullscreen() from a click handler.
Each toggle re-computes through a memoised hook, so flipping options never resets your input and the UI stays snappy on large inputs.
requestoptionslivememoisedtoggles
request · memoisedclick · live
```
el.requestFullscreen()
```
options set · memoisedlive
03
Listen
Watch fullscreenchange to update UI.
Randomness — where used — comes from crypto.getRandomValues, never Math.random. Heavy work sits in useMemo.
eventscomputeinstantlocaldeterministic
event · instantchange · computed
```
fullscreenchange
```
computed · instantinstant
04
Exit
document.exitFullscreen() or Esc returns to normal.
Copy writes through navigator.clipboard and downloads use a Blob — zero network traffic. Same input plus same options always yield the same bytes.
exitcopydownloadzero-networkreproducible
ok · copiedexit · copied
```
exit
```
shipped · ready to shipsuccess

Pro tips

Pro tips for everyday utilities

Reach for crypto.getRandomValues

Cryptographically random for IDs, tokens, salts. Math.random is for animation and games, not security.

Sort IDs lexicographically

UUID v4 has no time ordering. Use ULID or UUID v7 if you need sorted IDs.

Mock data with seeds

Faker-style libraries can be seeded so tests are reproducible. Embed the seed in the fixture file.

Reference cards beat memory

Cheatsheets for Vim, Git, Docker, Linux signals are faster than man pages when you’re mid-flow.

Browser APIs vary

Touch events, gamepads, and clipboard differ across vendors. Feature-detect before use.

Persist in the right place

localStorage for user preferences, sessionStorage for transient state, IndexedDB for structured data.

Use Cases

When to test fullscreen

Video players, presentations, immersive UI.

Video players

Confirm enter/exit transitions on your <video>. Random values come from crypto.getRandomValues — cryptographically secure for tokens, salts, and session IDs. Math.random is deterministic enough for animations but predictable enough to be a security bug.

CSPRNG-backed

Presentations

Wire slide-deck shortcuts to fullscreen toggles. Pair with hashids, ULID, or UUID v7 when you need both random and sortable — useful for primary keys, public-facing IDs, and event log ordering without a sequence column.

reproducible

Games

Check WebGL canvases go fullscreen correctly. Output is deterministic given the same seed, so fixtures and tests stay reproducible across CI runs and contributor machines. Embed the seed in the fixture file for full replay.

snappy

iframes

Diagnose allow=fullscreen permission issues. Heavy work runs through useMemo so the UI stays snappy on large inputs. Same input + same options yields identical bytes — the kind of stability snapshot tests rely on.

feature-detected

Auto-exit

See exactly when fullscreenchange fires after Esc. Storage tools persist to the right backend: localStorage for user preferences, sessionStorage for transient state, IndexedDB for structured data. Pick the right shelf and quota worries disappear.

deterministic

Cross-browser

Pick up webkit prefixes on older Safari. Browser feature detection: clipboard, fullscreen, gamepad, and Web Bluetooth APIs gracefully fall back when unavailable. No surprise white screens on Safari or older Firefox.

production-ready

FAQ

Frequently asked questions

Why does fullscreen sometimes silently fail?

Browsers require a user gesture (click/key). Calling from a timer or async chain after gesture loss is rejected.

What about iOS Safari?

iPhone Safari doesn't support element fullscreen — only video. iPad does.

Does it support iframes?

Yes, with the parent iframe's allow=fullscreen attribute set.

How do I detect the current element?

document.fullscreenElement returns the active node or null.

Is anything sent to a server?

No. Everything runs locally in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!