The Modern Web

Fullscreen

We all know the Web is an immensely powerful distraction machine, so sometimes providing an option to focus only on the content at hand is useful. This functionality is provided by the Fullscreen API, which allows you to expand any element to fill the entire screen of the device, rather than just the browser viewport. This is especially handy for large-screen devices, for instance, when playing video to provide the “lean back” experience of television.

Before setting up this script, check whether the browser has a full-screen mode. You can do this with the Boolean fullScreenEnabled attribute:

if (document.fullScreenEnabled) { … }

Fullscreen mode is called with the requestFullScreen() method. As this introduces potential security risks ...