Tutorial #39
Fullscreen API Intermediate   2014-01-10


Typical desktop/laptop screens tend be cluttered with multiple open windows showing email, news, twitter, etc. When the purpose of your web page is to show a beautiful photograph or video, all this clutter distracts the user and weakens their experience.

The solution to this is to expand the browser window to fill the screen, masking out everything else. All browsers have this ability built in - for example, Shift Cmd F on a Mac puts Chrome into full screen mode.

The problem with this is that the user has to know how to control the browser in this way. A better solution is to have a way to click on the page itself and trigger the transition.

The Fullscreen API offers a simple way to expand and collapse pages directly from JavaScript.

A user will click on a regular image on a page, or a button, and that image smoothly expands to fill the screen. Clicking the ESC (escape) key collapses the image and returns the user to the previous state.

Fullscreen is now implemented in all the recent browsers and is, in principle, simple to set up and use.

The complexity comes the current need to prefix the calls. To get around this we need to define some functions, etc., that map these to a single call. It's a bit of a hack, but it works...

This tutorial uses an image but the Fullscreen API can be used with video elements or just regular divs.

Demo 1 screenshot for this tutorial

Understanding the Code

The API is really pretty simple - call requestFullscreen on an element to go into full screen mode and call exitFullscreen to exit it.

Take a look at the demo. The image is shown with a height of 300px. Click on it - the browser will take over the entire screen with a black background and the image will increase in size to 600px. These are arbitrary sizes. You might want to keep the image the same size, or scale it to some other target size.

In full screen mode, when you press the ESC (escape) key, the browser collapses back to the regular view.

The demo HTML contains an image with the ID myimage within a div with the ID container. I will explain why we need this shortly.

The CSS first sets the initial size of the image to 300px. The display: block and margin: auto lines center the image within the outer div.

The fullscreen API includes CSS pseudo classes

that are applied during specific states. Like the function calls, which we will get to in a moment, these need to be prefixed. :-webkit-full-screen applies to WebKit browsers like Chrome and Safari, :-moz-full-screen applies to Firefox. They are the same but we need to duplicate them to allow either type of browser to work.

The block :-webkit-full-screen #container sets the dimensions of the #container div to the entire screen. The :-webkit-full-screen #myimage specifies the height of the image within that div, when the browser is in full screen mode. So here we want the full screen version to be twice the size of the regular version.

You might want to expand the image to its maximum possible size in full screen mode. But this requires knowledge of the size of the browser's screen on the fly. That should be possible but it is beyond this tutorial.

The first two blocks in the script define prefix free versions of the prefixed calls to exitFullscreen and requestFullScreen.

exitFullscreen applies to the document, rather than a specific Element, so this mapping is straightforward. requestFullScreen, on the other hand, applies to a specific element and so we define a function and pass it the element as an argument.

Note that the Mozilla variants use an upper case S in FullScreen, unlike the others.

Next we get the DOM elements for the image and the container, and bind a Click event to the image that calls requestFullscreen on #container if the document.fullscreenElement attribute is null. The call to exitFullscreen is not actually called in this script but might be triggered by a button in the full screen version.

When requestFullscreen is called, the browser triggers an animation that morphs the initial page into the full screen display. These animations vary slightly between the browsers. Safari has a nice animation but unfortunately stretches the image in our demo during that transition.

The default way to exit full screen mode is to hit the ESC key, but you could bind the exit function to any other key you want. The important thing is to let your users know how to get back to the regular page view.

Chrome and Firefox will display an alert in full screen mode that describes the ESC key. While that is a good idea, it can be intrusive as these two dialogs from Chrome and Firefox demonstrate:

Image 1 for this tutorial

Image 2 for this tutorial

The default behaviour of the browsers in full screen mode can be a problem. Without specifying image sizes, Safari and Chrome will go into full screen mode and leave the image size unchanged. Firefox, on the other hand, will expand it to full width and height of the screen, which will typically lead to distortion of the image.

That's the reason the image in the demo is wrapped in a container. We don't care how that is resized but we ensure a defined size for the image with the :-webkit-full-screen #myimage specification.

Because of this variation, be sure to test your implementations in ALL the main browsers.

Hopefully the implementation details will get sorted out during 2014 and then we can just call the unprefixed functions.

Code for this Tutorial

Share this tutorial

Related Tutorials

17 : Simple Slideshow   (Intermediate)

29 : Image Magnifying Glass   (Intermediate)

34 : Image Thumbnails and Lightboxes   (Intermediate)

Comment on this Tutorial

comments powered by Disqus