Displaying Content in Full Screen using
the Fullscreen API in JavaScript

Created: June 8th, 17'

Some content just beg to be displayed full screen, such as select images
or videos on your site. When I say full screen, I mean occupying the
entire user screen, without any of the browser chrome or even background
applications getting in the way. With the Fullscreen API, with just a
few lines of JavaScript code, you can turn the spotlight on any deserving piece of
content on your site, say that spectacular shot of the coast you're so
proud of and just posted on your travel blog (photo credits: PixaBay):

Opening an element in Full Screen

At the heart of the fullscreen API is the requestFullscreen() method, which
can be called on any element in the document to make it go kaboom:

The FullScreen API is supported in IE 11+ and all modern versions of
Chrome and Firefox on the desktop. The caveat is that at the time of
writing, prefixes are still needed to access the supported version of
the relevant methods and event handlers that make up the API. For the
main requestFullscreen() method for example, the following 3 additional
versions exist to cater to the 3 major browsers:

requestFullscreen() (standard version)

webkitRequestFullscreen()

mozRequestFullScreen()

msRequestFullscreen()

Cross Browser requestFullscreen() method

Cross Browser Full Screen Function: Let's create a cross browser version of
requestFullscreen() we can use on any element on the page so we don't
get lost in a sea of if/else statements each time we use it:

When we call getreqfullscreen(), we get the supported version of
requestFullscreen() in the browser. To call the actual method then, we
invoke call() on top of it to give the method the desired context, by
passing into call() the element we with to make full screen.

Example: Lets get all images on a page with CSS class "canfullscreen"
to go full screen when clicked on
(photo credits: PixaBay):

Note: To call requestFullscreen() on the document
itself to make the entire page full screen, use
document.documentElement.requestFullscreen(), or with the cross
browser function,
globalreqfullscreen.call(document.documentElement)

Exiting from Full Screen

When an element is placed in full screen, the user by default has the
option to exit from it by pressing "esc" or "f11". You can
also do the same on demand with document.exitFullscreen()
and its diabolical siblings:

document.exitFullscreen() (standard version)

document.webkitExitFullscreen()

document.mozCancelFullScreen()

document.msExitFullscreen()

Notice that unlike the requestFullscreen() method, which exists on each
DOM element to enter it into full screen, the exitFullscreen()
method is defined only on the document object to take the
element back to normal space when called.

Cross Browser Exit Function: Like in the previous section, we'll create
a function that returns the browser supported version of
document.exitFullscreen() for our convenience:

Checking for full screen mode

Whenever the browser goes into full screen mode, the
document.fullscreenElement object (read only) contains a reference to
the target element currently being shown. This object returns null in
all other cases.

Using document.fullscreenElement, we can:

Check if the browser is currently in full screen mode

Check which element is being shown

document.fullscreenElement like other Full Screen API related
methods is also prefixed depending on the browser:

document.fullscreenElement (standard version)

document.webkitFullscreenElement

document.mozFullScreenElement

document.msFullscreenElement

Yes this is starting to be a real pain in the beeeehind, but lets just
roll with the punches.

Cross Browser Get Full Screen Element Function : Use the following function to return the
supported document.fullscreenElement object:

Other methods and event handlers

A few other objects and event handlers complete the Full Screen API. They
are:

document.fullscreenEnabled: Boolean that returns true if the page is
available for full screen mode. Windowed plugins or <iframe> elements
without an explicit allowfullscreenattribute set
will fail when attempting to open them in full screen. The
document.onfullscreenerror event will fire instead in those instances.

document.onfullscreenerror: Event handler that fires when the
browser cannot enter full screen mode when requested.

And yes, at this time, prefixes must be used to access the corresponding
versions of everything listed above. Here they are:

document.fullscreenEnabled (standard)

document.onfullscreenchange (standard)

document.onfullscreenerror (standard)

document.webkitFullscreenEnabled

document.onwebkitfullscreenchange

document.onwebkitfullscreenerror

document.mozFullScreenEnabled

document.onmozfullscreenchange

document.onmozfullscreenerror

document.msFullscreenEnabled

document.onmsfullscreenchange

document.onmsfullscreenerror

To create cross browser versions of document.onfullscreenchange and
document.onfullscreenerror,
a simple but elegant approach is to first see which version of the requestFullscreen()
method the browser supports, and then map the result to the corresponding
version of the event handler we wish to use.

When we call getonfullscreenevt(), we get the supported version of "onfullscreenchange"
back, such as "onwebkitfullscreenchange". Then, to utilize this event
string, we associate it with the document object, the object the event is
defined under, and assign a function to it:

They are immensely helpful when the style of the target element and
its children need to be different from their default styles in normal mode,
such as a FIGURE container with an image inside that you wish to make full
screen:

Example:

Hawaii, a U.S. state, is an isolated volcanic archipelago in the Central Pacific. Its islands are renowned for their rugged landscapes of cliffs, waterfalls, tropical foliage and beaches with gold, red, black and even green sands. -Wikipedia

The figure by default has a width of 300px, with the child image spanning
the full width. When in full screen mode, however, we want the figure to
expand to 100%; and the contained image to a height of 90vh (leaving some
room for the caption below it). Here is the CSS that accomplishes this:

Conclusion

Displaying certain content as full screen can be just the extra "oomph"
you need to impress and convert your visitors, such as for product images on
an ecommerce site. With the Full Screen API, there is now a way to do that.