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:

element.requestFullScreen()

This method allows a single element to go fullscreen.

Document.getElementById(“myCanvas”).requestFullScreen()

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

document.cancelFullScreen()

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

Document.fullScreen

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

document.fullScreenElement

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) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
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;
fullScreen(html);
 // For a specific element on the page
var canvas = document.getElementById('mycanvas');
fullScreen(canvas);

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) {
document.requestFullScreen();
} else if(document .webkitRequestFullScreen ) {
document.webkitRequestFullScreen();
} else if(document .mozRequestFullScreen) {
document.mozRequestFullScreen();
}
}

//cancel full-screen
fullScreenCancel();

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.

Conclusion

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

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…