Fullscreen API

Fullscreen API
Name	Fullscreen API
Introduced	2012
Standard	Web APIs
Status	W3C Candidate Recommendation
Implementations	Chromium, Gecko, WebKit, EdgeHTML

Fullscreen API

The Fullscreen API enables web content to be presented using the entire display area of a device. It is specified by standards bodies and implemented in major browsers to allow immersive experiences for media players, presentations, games, and web applications. Adoption has involved coordination among vendors such as Google, Mozilla Foundation, Apple Inc., and Microsoft and intersects with platform features from Android (operating system), iOS, Windows, and Linux.

Overview

The API defines programmatic entry and exit from an element-focused fullscreen mode to optimize display for HTML5, SVG, Canvas (computing), and multimedia elements such as HTMLMediaElement. It emerged alongside specifications like Pointer Events and Fullscreen API (W3C)-adjacent drafts to harmonize behavior across engines. Designers and developers from organizations including WHATWG, W3C, Blink (browser engine), and Gecko (software) contributed to resolving differences in user gesture requirements and security considerations. Use cases range from video playback in YouTube-style players and game engines like Unity (game engine) and Unreal Engine HTML exports to document viewers and kiosk applications used by institutions such as Smithsonian Institution museums and industry deployments at Netflix and Spotify web clients.

API Specification and Browser Support

The specification outlines methods, attributes, and events that browser engines must expose; notable implementers include Chromium, Firefox, Safari, and Microsoft Edge (web browser). Support matrices are maintained by projects including Can I Use and community reports from MDN Web Docs editors and contributors. Differences historically involved vendor prefixes and naming (e.g., webkit and moz prefixed methods) addressed by compatibility work by engineers at Google LLC, Mozilla Foundation, and Apple Inc. Specification tracking involved repositories and issue trackers hosted on GitHub and governance discussions around WHATWG and W3C mailing lists. Mobile constraints on Android (operating system) and iOS required platform-specific behavior changes coordinated with teams at Samsung Electronics and Qualcomm for hardware acceleration.

Usage and Examples

Developers call methods on DOM elements to request fullscreen and to exit fullscreen; common integration patterns appear in examples from Mozilla Developer Network, tutorials by Google Developers, and sample code from MDN Web Docs contributors. Typical implementations combine Fullscreen API (W3C) calls with UI frameworks such as React (JavaScript library), Vue.js, or Angular (application framework), and media libraries like video.js or Media Source Extensions. Game and graphics applications integrate the API with WebGL contexts and engines originating from projects like Three.js and Babylon.js. Accessibility advocates from organizations including WAI and AbilityNet recommend patterns alongside ARIA attributes and keyboard handling exemplified in guides published by World Wide Web Consortium working groups.

Permissions, Security, and User Experience

The API enforces user gesture requirements and may require an explicit user interaction to prevent abusive behavior; browser implementers referenced security guidance from W3C and incident analyses from security teams at Google Project Zero and Mozilla Security. User experience guidance references patterns from Material Design and platform heuristics used by Apple Human Interface Guidelines and Microsoft Fluent Design System for toggling fullscreen affordances. Mitigations for clickjacking and spoofing include persistent browser UI cues similar to indicators used in TLS/HTTPS contexts and permission models akin to those used for Geolocation API and Notifications API.

Events and Properties

Events signal entering and leaving fullscreen as well as state queries exposed via document properties; implementations historically varied across engines until standardization efforts by contributors from Blink (browser engine), Gecko (software), and WebKit reconciled naming. Event handlers in examples use patterns shown in resources by MDN Web Docs and community repositories on GitHub; properties interoperate with CSS features and viewport behavior managed by rendering engines in Chromium, WebKit, and Servo. Integration with input APIs such as Pointer Lock API and media playback APIs like Media Session API is common in immersive applications built by studios like Epic Games and Unity Technologies.

Compatibility and Polyfills

Compatibility layers addressed vendor-prefixed implementations and missing features across older versions of Safari (web browser), Internet Explorer, and legacy Android Browser builds. Polyfills and shims were published on package registries like npm and source platforms like GitHub by contributors associated with projects such as Modernizr and community authors. Progressive enhancement techniques advised by MDN Web Docs and web performance teams at Google recommend feature detection and fallback behaviors aligning with responsive design patterns used by companies like Amazon (company) and Airbnb, Inc..

Category:Web APIs