IconVault logoIconVault
Sign in

Fullscreen API - Interactive Lab | IconVault

Try the real Fullscreen API: requestFullscreen, navigationUI options, :fullscreen CSS, live state and events. Free, in your browser.

All tools

Fullscreen API

requestFullscreen with events and CSS

5 of 5 free uses left

The Fullscreen API is not available here.

It is supported in all modern browsers, so this usually means an embedded frame blocked it.

Fullscreen controls

Element

navigationUI

Controls whether the browser chrome stays visible. "hide" only applies to page fullscreen.

fullscreenElement: (none)

fullscreenEnabled: false

5 of 5 free fullscreen runs left.

Event log

Enter fullscreen (or press Esc while fullscreen) to see the events.

Demo element

This box can go fullscreen

When this element is the fullscreen element, the :fullscreen rule below restyles it. Press Esc to exit, the browser always reserves that.

The box uses a real #fs-demo:fullscreen CSS rule, so its restyle in fullscreen mode is pure CSS, no JavaScript.

Rules worth knowing: requestFullscreen must come from a user gesture, returns a promise, and can be denied by Permissions Policy or an iframe without allow="fullscreen".

Only one element is fullscreen at a time. Exiting fires fullscreenchange on the document, and the previous element gets its original styles back automatically.

About this tool

IconVault's Fullscreen API playground calls the real `requestFullscreen()`: send the demo box or the whole page fullscreen, experiment with the navigationUI option, watch document.fullscreenElement update live, and see fullscreenchange and fullscreenerror events stream into the log. A pure CSS `:fullscreen` rule restyles the demo box with zero JavaScript. It is free and runs fully in your browser.

You will learn why the request needs a user gesture, what each navigationUI value does to the browser chrome, why only one element can be fullscreen at a time, and that Esc always exits (the browser reserves it). If an iframe blocks fullscreen, the tool reports fullscreenEnabled honestly instead of failing silently.

Frequently asked questions

Popular searches

fullscreen apirequestfullscreenfullscreen javascriptexitfullscreenfullscreenchangefullscreenerrorfullscreen css:fullscreendocument.fullscreenelementfullscreenenablednavigationuifullscreen api examplefullscreen api tutorialmake div fullscreenfullscreen button javascriptfullscreen video customfullscreen image gallerypresentation mode webkiosk mode browserimmersive webfullscreen iframe allowallow fullscreen iframepermissions policy fullscreenfullscreen promise rejectedfullscreen not workingesc exits fullscreenfullscreenchange eventfullscreen api browser supportcaniuse fullscreenfullscreen safari webkitwebkitrequestfullscreenmozrequestfullscreenfullscreen api reactfullscreen api typescriptmdn fullscreen apitest fullscreen onlinefullscreen playgroundfullscreen demotoggle fullscreen javascriptfullscreen element stylingfullscreen backgroundfullscreen mobilescreen orientation fullscreenwake lock fullscreengame fullscreen webcanvas fullscreenfullscreen api 2024picture in picture vs fullscreenenter fullscreen onclickfullscreen event listenerfullscreen toggle button

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →