HTML5 Fullscreen API


The HTML5 fullscreen API is a javaScript API that allows a developer or web designer to make a web site or web application have the ability to enter into a full-screen mode which has no browser chrome or controls, just your web content. It is pretty neat, but their are a few gotcha’s you should watch out for if you intend to use it.

Due to security reasons you can not force a user into full-screen mode. The user has to activate full-screen mode through some sort of interaction with your web site, say by clicking a “Full-screen” button, and even then some browsers will display a message asking for confirmation that you (the user) really do want to enter full-screen mode.

Click the button below to see this web site enter full-screen mode.

By default the “Esc” key will let a user exit full-screen mode or you can give the user a button to click on to exit full-screen mode.

Click the button below to exit full-screen mode

The Code

Entering Full-screen Mode

The various browsers are using vender prefixes for the various full-screen javaScript methods and events.

Below is the code used to enter full-screen mode when the user clicks the above full-screen button.


var fullscreenAvailable = false;
var btn01 = document.getElementById('btn-01');

// Test to see if
// full-screen is available
if(
  document.fullscreenEnabled || 
  document.webkitFullscreenEnabled || 
  document.mozFullScreenEnabled ||
  document.msFullscreenEnabled
){
  fullscreenAvailable = true;
}

// Enter full-screen mode when btn01 
// is clicked...
btn01.addEventListener('click', function(){

    if(fullscreenAvailable){
        launchFullscreen(document.documentElement); 
    }else{
        alert('Sorry, fullscreen not available...');      
    }

}, false);

// Helper function to handle 
// all the cross-browser differences 
// for entering full-screen mode
function launchFullscreen(element) {

    if(element.requestFullscreen) {
        element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }

}

Exiting Full-screen Mode

You can use the “exitfullscreen” method to allow the user to exit full-screen mode. The user can also do this by pressing “Esc” on their keyboard. In Chrome on android the user can swipe down from the top to exit full-screen mode.

Below is the code used for exiting full-screen mode when the user clicks the above "Exit Full-screen Mode" button.


var btn02 = document.getElementById('btn-02');

// Exit full-screen mode when btn02
// is clicked
btn02.addEventListener('click', function(){

    exitFullscreen();   

}, false);

// Helper function for dealing
// with the various ways that
// different browsers handle
// exiting full-screen mode
function exitFullscreen() {

    if(document.exitFullscreen) {
        document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }

}

The code for testing for full-screen support modified from code found at sitepoint.com/use-html5-full-screen-api and the code for the helper functions modified from code found at davidwalsh.name/fullscreen.

Make an Element Full-screen

In the previous demo we made the entire document full-screen, however, you can also make an element full-screen as well. To do this you simply call the requestfullscreen() method on the element that you want to make full-screen. I have left out the vender prefixes in the code sample below for brevity.


img01 = document.getElementById('img-01');

// put the image into fullscreen
// mode
img01.requestFullscreen();

If you click the image below than just the image will enter full-screen mode.

Click the image below to view it in full-screen mode.

Birds at Jericho Beach

Differences Between Browsers

If you tested the image above in various browsers you may have noticed some differences in how the browsers handle an image in full-screen mode.

In testing that I did I found Firefox stretches the image to fill the entire screen. This can lead to the image being distorted if the image is not the same aspect ratio as the users monitor. IE11 appears to honour existing CSS styles on the image when displaying the element in full-screen. Chrome centers the image in the middle of the screen and will use the CSS styles applied to the image when in full-screen mode. However if no width and height attributes are set on the element either through HTML or CSS than Chrome appears to stretch the image so that it fills the top and bottom of the screen.

I personally prefer how Chrome handles full-screen mode. If you want IE11 to behave like Chrome you can try adding the following to your CSS.


:-ms-fullscreen {
    width: auto;
    height: auto;
    margin: auto;
}

The above code sample from: sitepoint.com/use-html5-full-screen-api.

The above code will not work for Firefox. To make all the various browser behave in similar ways requires wrapping the intended full-screen element in a parent element and making the parent element full-screen.

Click the image below to make it go into full-screen mode. In this case the image will be centred in full-screen mode when viewed in Chrome, Firefox, and IE11.

Yellow flower

The code below is what I used to make all the browsers place the above image in the centre of the screen when we put the image into full-screen mode.

HTML


<div class="img-02">
    <img src="birds-on-jericho-beach.jpg" width="320" height="320" alt=""  />
</div>

CSS


.img-02:-webkit-full-screen img {
    display: block;
    margin: 0; /* overide pre-existing margin styles */ 
}

.img-02:-moz-full-screen img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0; /* overide pre-existing margin styles */
}

.img-02:-ms-fullscreen img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0; /* overide pre-existing margin styles */
}

JS


var img02 = document.querySelector('.img-02');

img01.addEventListener('click', function(){

    if(fullscreenAvailable){
        launchFullscreen(img01);    
    }else{
        alert('Sorry, fullscreen not available...');      
    }   

}, false);

A Gotcha

In my testing on my Samsung Note 3 I noticed that the stock browser (not the Chrome browser for Android) falsely returned true for the full-screen support test when in fact it does not support full-screen mode. I hit this bug on this website when I was trying to get the full-screen mode to work with my portfolio slide shows. You can download this javaScript file for my solution, which is one of the javaScript files used on this page.

Codepen Demos