screenfull
Simple wrapper for cross-browser usage of the JavaScript Fullscreen API
A tiny JavaScript library (under 1 KB) that gives browsers a single, consistent API for going fullscreen, hiding the differences between Chrome, Firefox, and Safari's implementations.
Screenfull is a tiny JavaScript library, under 1 kilobyte, that makes it straightforward to take a webpage or any element on it into full-screen mode in a browser. Browsers have a built-in fullscreen feature, but the code needed to trigger it varies across Chrome, Firefox, and Safari because each one historically used slightly different names for the same functions. Screenfull hides all of that behind a single consistent API.
With it, going fullscreen is a two-line call: check whether it is allowed, then request it. You can target the whole page or a specific element, like a video or an image. You can also listen for events to know when the user enters or exits fullscreen, or detect errors if the request is blocked.
The library works on desktop Chrome, Firefox, and Safari, as well as on iPad. It does not work on iPhone, which is a browser limitation rather than a library one. The maintainer has marked the project feature complete, meaning it does what it does and no new capabilities will be added.
Screenfull is a good fit for any web project that needs fullscreen behavior, such as video players, photo viewers, games, or presentation tools. It is installed via npm and works with plain JavaScript, jQuery, Angular, and other frameworks.
Where it fits
- Add a fullscreen button to a video player that works across Chrome, Firefox, and Safari without browser-specific code.
- Make a web-based game or slideshow presentation go fullscreen with a single function call.
- Detect when a user exits fullscreen mode so your app can respond, such as pausing a video.
- Target a specific element like an image or a map to go fullscreen instead of the whole page.