With the advent of HTML5, a variety of advanced APIs became available, among which the Fullscreen API stands out for enabling web pages to be displayed in full-screen mode – a feature historically exclusive to Flash content.
This functionality proves extremely beneficial for media presentations such as videos and images or for a more immersive gaming experience. Essentially, any content that demands the viewer’s undivided attention can take advantage of the Fullscreen API.
What’s more, implementing this API is remarkably straightforward.
Understanding the Methods
The Fullscreen API includes several methods:
element.requestFullScreen()
A specific element can invoke the full-screen display using this method.
document.getElementById("myCanvas").requestFullScreen()
For instance, a canvas with the ID ‘myCanvas’ would scale to full-screen with this code.
document.exitFullScreen()
To exit full-screen view and switch back to the standard document view, this method is used.
document.fullscreen
This property indicates whether full-screen mode is currently active with a boolean value.
document.fullscreenElement
This returns the element that is being displayed in full-screen.
Note that while these are the standard methods, most browsers still require vendor-specific prefixes to work properly. At this moment, Chrome, Firefox, and Safari need these prefixes, whereas Internet Explorer and Opera do not support the API.
Activating Full-Screen Mode
To kick things off, we should identify which method is recognized by the user’s browser. This is achieved by writing a function that picks the right method accordingly and then activates it:
// Helper function to activate fullscreen
function activateFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}
This function checks for the presence of any ‘requestFullScreen’ methods and then calls the browser-specific function using the appropriate vendor prefix.
With the function in place, achieving full-screen mode is as simple as:
// For the whole webpage
var htmlPage = document.documentElement;
activateFullScreen(htmlPage);
// For a specific element
var canvasElement = document.getElementById('mycanvas');
activateFullScreen(canvasElement);
This action prompts the user for permission. Once granted, the browser’s toolbars disappear, leaving only the requested page or element visible on the screen.
Exiting Full-Screen Mode
To revert to the normal view, we utilize a similar strategy with vendor prefixes to determine the correct function to use:
// Helper function to cancel fullscreen
function cancelFullScreen() {
if(document.exitFullScreen) {
document.exitFullScreen();
} else if(document.webkitExitFullScreen) {
document.webkitExitFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
// Exiting full-screen mode
cancelFullScreen();
Styling for Full-Screen Mode
Accompanying the JavaScript API is a CSS pseudo-class named :full-screen, which allows for styling elements specifically when they’re in full-screen mode. Browser dimensions typically increase slightly in this view, making it prime for custom styling.
/* Apply changes to the whole body when in full screen */
:fullscreen {
font-size: 16px;
}
:webkit-full-screen {
font-size: 16px;
}
:moz-full-screen {
font-size: 16px;
}
/* Styling a single element */
:fullscreen img {
width: 100%;
height: 100%;
}
:webkit-full-screen img {
width: 100%;
height: 100%;
}
:moz-full-screen img {
width: 100%;
height: 100%;
}
Keep mind that each vendor prefix must be in its separate block to function correctly.
Final Thoughts
Though not as widely known or discussed among the features that arrived with HTML5, the Fullscreen API is both remarkably effective and easy to implement. The ability to dedicate the viewer’s attention entirely to specific elements, be it for videos, images, or gaming, makes a few lines of code well worth it for the enhanced user experience.
Have you applied the Fullscreen API in your projects? Are there other creative uses for it you can imagine? Share your thoughts below.
