HTML5 Fullscreen API

Closely related to the

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

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{.btn.btn-primary}

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)