Fullscreen API Tester

The Fullscreen API is a browser-native JavaScript API that allows web content to be displayed in full-screen mode, hiding browser UI elements like toolbars and address bars. It provides methods like Element.requestFullscreen() to enter fullscreen and document.exitFullscreen() to exit. This API is commonly used for video players, presentations, games, code editors, and immersive web experiences.

Browsers enforce a user activation requirement for security and user experience reasons. Fullscreen requests initiated without a user gesture (like a click or keypress) will be rejected with a fullscreenerror event. This prevents malicious websites from hijacking the user's screen without their knowledge. Always trigger requestFullscreen() inside a click, keydown, or touch event handler.

Call document.exitFullscreen() — note that this method is on the document object, not on the fullscreen element. This is a common mistake. You don't need to know which element is currently fullscreen; simply calling document.exitFullscreen() will exit whatever fullscreen state is active. Users can also press Esc to exit, which triggers a fullscreenchange event just like a programmatic exit would.

The navigationUI option is passed to requestFullscreen({ navigationUI: "show" | "hide" | "auto" }) on mobile browsers. It controls whether the browser shows navigation UI (like back buttons) during fullscreen. "show" keeps nav controls visible, "hide" attempts to hide them for a more immersive experience, and "auto" lets the browser decide. Note: not all browsers respect this hint; support is primarily in mobile Chromium-based browsers.

Check document.fullscreenEnabled. If it returns true, the browser supports the Fullscreen API and allows fullscreen requests. If false, fullscreen is not available — this could be due to browser restrictions, iframe sandboxing (missing allow="fullscreen" attribute), or user-configured permissions. Also check if Element.prototype.requestFullscreen exists for API feature detection.

Two events are relevant: fullscreenchange fires on the document when entering or exiting fullscreen (check document.fullscreenElement to determine the new state), and fullscreenerror fires when a fullscreen request fails — for example, if the request wasn't triggered by a user gesture, or the target element is not in the DOM. Listen on document for both events.

Yes! Modern mobile browsers including Chrome for Android and Safari on iOS (iOS 12+) support the Fullscreen API. On mobile, fullscreen typically hides the browser's address bar and navigation controls, giving more screen real estate. The navigationUI option is particularly relevant on mobile. Note that iOS Safari had some quirks in earlier versions, but recent versions work well with the standard API.

Common causes include: (1) The request was not triggered by a user gesture (click, tap, keypress). (2) The target element is not attached to the DOM. (3) The document is in an iframe without the allow="fullscreen" attribute. (4) The browser or OS has disabled fullscreen via permissions. (5) The element has display: none or is otherwise not renderable. Listen to the fullscreenerror event to catch and debug these issues.

Yes. You can fullscreen any DOM element — a <div>, <video>, <canvas>, or even the entire document by calling document.documentElement.requestFullscreen(). Fullscreening a specific element is more common for video players or interactive demos, while fullscreening the document element mimics a "full page" experience. This tool provides both options for testing.

Use the :fullscreen CSS pseudo-class to style elements when they are in fullscreen mode. For example: .my-element:fullscreen { background: #000; }. For cross-browser support, include vendor-prefixed versions: :-webkit-full-screen (Chrome/Safari/Edge), :-moz-full-screen (Firefox), and :-ms-fullscreen (legacy IE/Edge). The standard :fullscreen is now supported by all modern browsers.