How to use the Fullscreen API

Default avatar.
March 13, 2013
How to use the Fullscreen API.

ThumbnailBundled with HTML5 came a large number of API goodness and one of the best was the Fullscreen API that provides a native way for the browser to do what was only possible in flash for a long time: display the webpage in fullscreen mode for the user.

This comes in handy if you are displaying video, or images, or if you are developing a game. In fact, any content that needs to be focussed on can benefit from the Fullscreen API.

And best of all, the Fullscreen API is really easy to use...

The methods

A number of methods are part of the Fullscreen API:


This method allows a single element to go fullscreen.


This will cause the canvas with the ID 'myCanvas' to go fullscreen.


This simply exits fullscreen mode and returns to the document view.


This will return true if the user is in full-screen mode.


Returns the element that is currently in full-screen mode.

Note that these are the standard methods but for the time being you will need vendor prefixes in order to make this work in Chrome, Firefox and Safari (Internet Explorer and Opera do not support this API at present).

Launching fullscreen mode

Since first we need to find out which method the browser recognizes we will create a function that will find the right method for the browser and the call it:

//helper function
function fullScreen(element) {
if(element.requestFullScreen) {
} else if(element.webkitRequestFullScreen ) {
} else if(element.mozRequestFullScreen) {

As you can see all this function does is see if any of the requestFullScreen methods return true and then it calls the function for the correct browser using its vendor prefix.

After this all we need to do is call the fullScreen function like so:

//for the whole page
var html = document.documentElement;
 // For a specific element on the page
var canvas = document.getElementById('mycanvas');

This will send a prompt to the user requesting permission to go fullscreen, if it’s accepted all the toolbars in the browser will vanish and the only thing on the screen will be the desired web page or the single element.

Cancelling fullscreen mode

This method also requires vendor prefixes, so we will use the same idea as above and create a function that will determine which prefix we should be using according to the user's browser.

One thing you will notice is that this method doesn't need any elements passed because unlike the requestFullScreen method it always applies to the whole document.

// the helper function
function fullScreenCancel() {
if(document.requestFullScreen) {
} else if(document .webkitRequestFullScreen ) {
} else if(document .mozRequestFullScreen) {

//cancel full-screen

The CSS pseudo-class

Bundled with this JavaScript API came a CSS pseudo-class called :full-screen and this can be used to style any elements in the webpage when it's in full-screen mode, this can come in handy because the browser size increases a little when in full-screen mode.

/* Changing something in the body */
:-webkit-full-screen {
font-size: 16px;
:-moz-full-screen {
font-size: 16px;
/*Only one element*/
:-webkit-full-screen img {
width: 100%;
height: 100%;
:-moz-full-screen img {
width: 100%;
height: 100%;

Be aware that you can't separate the vendor prefixes with commas because the browser will not read them:

/* This will not work */
:-webkit-full-screen img,:-moz-full-screen img {
width: 100%;
height: 100%;

In order for the styles to be applied properly you must place every vendor prefix in it's own block.


This JavaScript API is one of the least known that shipped with HTML5 but in my opinion it's both effective and simple to implement. The improved user experience of focussing on a single element, especially for video, images and games is well worth the few lines of code involved.

Have you implemented the Fullscreen API anywhere? What uses can you think of for it? Let us know in the comments.

Featured image/thumbnail, focus image via Shutterstock.

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…