Chinese street with lanterns
Simple Fullscreen API example. to present content in fullscreen mode. Press ESC to cancel.
Part of the The Fullscreen, Dialog, Storage & Speech APIs Reading List

Right now Apple, Microsoft, Google and Mozilla are pushing towards “flat” design by slimming down the visual clutter of their applications. Despite this minimalist trend, it is unavoidable that at least a few buttons and menu options will remain in browsers.

Those same browsers are being used to display games, video and other content, where the presence of window “chrome” is deeply distracting. As a separate application, Adobe Flash had a “fullscreen” mode that can take over the complete screen, but, as with most other plugin features, HTML5 is superseding it, in the form of the FullScreen API.|

Like Geolocation, the Fullscreen API is permission-based: the user must explicitly request content to be displayed in fullscreen mode; it cannot be imposed on a page.  After launching fullscreen, the browser asks if the user wants to keep things that way.

While this works as a practical safeguard, I suspect that some web developers might still regard the Fullscreen API as the 21st century equivalent of the popup window. The reality is that fullscreen mode is not for every website.  However tempting, it is likely that most general-interest sites do not require hijacking user’s screen. In most cases, fullscreen display should be limited to instances in which the user is to be engaged without distraction for several minutes, such as:

  • Extended presentations
  • Browser-driven kiosk applications
  • Games
  • Video content

Keep in mind that the average visitor stays on a web page for less than a minute; engaging fullscreen mode should therefore be reserved for very particular applications. It’s also important to note that your content should be delivered at sufficiently high resolution to be presented across the screen: responsive images are a must when offering fullscreen mode.

Browser Support

The Fullscreen API has good browser support on the desktop: Firefox 10+, Chrome 15+, Internet Explorer and 11 and Safari 5.1 all support the API. The issue right now is that each browser interprets the existing API with slight modifications to the syntax, just like CSS vendor prefixes. For example, the requestFullscreen method: 


element.requestFullscreen();
element.mozRequestFullScreen();
element.webkitRequestFullscreen();
element.msRequestFullscreen();

Note that requestFullscreen() starts with a lowercase letter in its standard form, and screen has a lowercase s, but the method begins with a capital letter when a prefix is added, keeping to JavaScript’s camelCase convention. Because of the subtle differences in the syntax, I suggest you copy and paste the methods to avoid typos.

Internet Explorer pre version 11 has its own, very different, proprietary method, which I’ll address in a future article.

Coding For FullScreen Support

Now that we understand the basic requirements for the FullScreen API, let’s look at the ways it might be used in browsers that support it.  First, we need to ensure that the right method is called for the appropriate browser. We’ll do that in a function: 

function launchFullScreen(element) {
	if (element.requestFullscreen) {
element.requestFullscreen();
	}
	else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
	}
	else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
	}
	else if (element.msRequestFullscreen) { 
element.msRequestFullscreen();
	}
}

The function takes a single argument, which defines what will be pushed into fullscreen mode. If you want the entire page to be displayed this way, the root documentElement should be passed. This action will commonly be associated with a button or link somewhere on the page: 

<button onclick="launchFullScreen(document.documentElement)"> Fullscreen </button>

Using the same function, you can pass any identifiable element and its content into fullscreen mode: 

<button onclick="launchFullScreen(document.getElementById('pic'))">
Fullscreen Image </button>

Note that HTML5 video has natural fullscreen support built into the browser.

Using fullscreen mode often implies that new CSS will be applied to the content, and/or that elements will be swapped out for an alternative high-resolution version.

Exiting Fullscreen Mode

While the ESC key is a standard browser UI option to escape fullscreen mode, it’s good practice to present a visible option to do so. Note that the method swaps between CancelFullScreen (the old version of the spec) to exitFullscreen, the new version. 

function cancelFullScreen() {
	if (document.exitFullscreen) {
document.exitFullscreen();
	} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
	} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
	} else if (document.msExitFullscreen) {
document.msExitFullscreen();
	}
}

Again, this is usually associated with an interface element: 

<button onclick="cancelFullScreen(documentElement)">Cancel Fullscreen</button>

As you can imagine, positioning these interface elements and making them available to the user at appropriate times can become a little complicated.

Keep in mind that users can still reject the initial FullScreen prompt: if they do so, the browser will fall back into standard “windowed” operation. Needless to say, the presentation of your content should continue regardless.

Photograph by Trey Ratcliff, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.