HTML5 Fullscreen API

HTML5 Fullscreen API

   Leave a comment   
http://bit.ly/1cek9bf

Closely related to the <video> tag, the fullscreen API is an incredibly simple and easy to use API for using with JavaScript to maximise the window fully, as you would do if you pressed F11. Contrary to just pressing F11 however, the fullscreen API allows people to go fullscreen from the website itself, by using a link or at any point necessary.

The basic syntax is as follows:

// Check if the requestFullScreen() function exists
if ( element.requestFullScreen )
{
    // If so, call it!
    element.requestFullScreen();
}

Of course it’s not as easy as this (things rarely are), browsers are still in the prefix stage of implementing this so different browsers have different calls. The example below shows the different prefixes in use and also illustrates another point. With the fullscreen API, you doing have to fullscreen the entire document, you can fullscreen an element – which getting back to the introduction is why it’s closely tided to the <video> tag because it allows videos to be show fullscreen (a very useful function).

Example:

function goFullScreen( element )
{
    if ( element === undefined )
    {
        // If no element defined, use entire document
        element = document.documentElement;
    }
    
    if ( element.requestFullScreen )
    {
        // Spec, supported by Opera 12.1+
        element.requestFullScreen();
    }
    else if ( element.mozRequestFullScreen )
    {
        // Supported by Firefox 10+
        element.mozRequestFullScreen();
    }
    else if ( element.webkitRequestFullScreen )
    {
        // Supported by Chrome 15+ & Safari 5.1+
        element.webkitRequestFullScreen();
    }
    // Still no IE support, sorry folks 🙁
}

// Example jQuery Call
$('a.fullscreen').click(function()
{
    goFullScreen();
});
Demo

Extras

As well as the fundamental requestFullScreen() function, the other useful function which tallies along is the exitFullscreen() which allows the user to close the fullscreen from within the element they are viewing.

Elements are also style-able when in fullscreen with the use of the CSS full-screen selector, like so:

body:-webkit-full-screen {
	background-color: CornflowerBlue;
}

body:-moz-full-screen {
	background-color: CornflowerBlue;
}

Some good articles have been written about the FullScreen API, which I would of course recommend a read over, like a more in-depth article by David Walsh and a guide by Eric Bidelman on HTML5Rocks.

Do you think the Fullscreen API could be a danger if used for phishing, as described by Feross Aboukhadijeh? Let us know in the comments.

(Photo by Louish Pixel)

Leave a Reply

Your email address will not be published. Required fields are marked *