Navigation

How to use the Fullscreen API

By Sara Vieira | CSS, HTML, JavaScript | Mar 13, 2013

Bundled with HTML5 came a large number of API goodness and one of the best was the Fullscreen API that provides a native way for the browser to do what was only possible in flash for a long time: display the webpage in fullscreen mode for the user.

This comes in handy if you are displaying video, or images, or if you are developing a game. In fact, any content that needs to be focussed on can benefit from the Fullscreen API.

And best of all, the Fullscreen API is really easy to use…

 

The methods

A number of methods are part of the Fullscreen API:

element.requestFullScreen()

This method allows a single element to go fullscreen.

Document.getElementById(“myCanvas”).requestFullScreen()

This will cause the canvas with the ID ‘myCanvas’ to go fullscreen.

document.cancelFullScreen()

This simply exits fullscreen mode and returns to the document view.

Document.fullScreen

This will return true if the user is in full-screen mode.

document.fullScreenElement

Returns the element that is currently in full-screen mode.

Note that these are the standard methods but for the time being you will need vendor prefixes in order to make this work in Chrome, Firefox and Safari (Internet Explorer and Opera do not support this API at present).

 

Launching fullscreen mode 

Since first we need to find out which method the browser recognizes we will create a function that will find the right method for the browser and the call it:

//helper function
function fullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.webkitRequestFullScreen ) {
    element.webkitRequestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  }
}

As you can see all this function does is see if any of the requestFullScreen methods return true and then it calls the function for the correct browser using its vendor prefix.

After this all we need to do is call the fullScreen function like so: 

//for the whole page
var html = document.documentElement;
fullScreen(html);
 // For a specific element on the page
var canvas = document.getElementById('mycanvas');
fullScreen(canvas);

This will send a prompt to the user requesting permission to go fullscreen, if it’s accepted all the toolbars in the browser will vanish and the only thing on the screen will be the desired web page or the single element.

 

Cancelling fullscreen mode

This method also requires vendor prefixes, so we will use the same idea as above and create a function that will determine which prefix we should be using according to the user’s browser.

One thing you will notice is that this method doesn’t need any elements passed because unlike the requestFullScreen method it always applies to the whole document.

// the helper function
function fullScreenCancel() {
  if(document.requestFullScreen) {
    document.requestFullScreen();
  } else if(document .webkitRequestFullScreen ) {
    document.webkitRequestFullScreen();
  } else if(document .mozRequestFullScreen) {
    document.mozRequestFullScreen();
  }
}

//cancel full-screen
fullScreenCancel();

 

The CSS pseudo-class

Bundled with this JavaScript API came a CSS pseudo-class called :full-screen and this can be used to style any elements in the webpage when it’s in full-screen mode, this can come in handy because the browser size increases a little when in full-screen mode.

/* Changing something in the body */
:-webkit-full-screen {
  font-size: 16px;
}
:-moz-full-screen {
  font-size: 16px;
}
/*Only one element*/
:-webkit-full-screen img {
  width: 100%;
  height: 100%;
}
:-moz-full-screen img {
  width: 100%;
  height: 100%;
}

Be aware that you can’t separate the vendor prefixes with commas because the browser will not read them:

/* This will not work */
:-webkit-full-screen img,:-moz-full-screen img {
  width: 100%;
  height: 100%;
}

In order for the styles to be applied properly you must place every vendor prefix in it’s own block.

 

Conclusion

This JavaScript API is one of the least known that shipped with HTML5 but in my opinion it’s both effective and simple to implement. The improved user experience of focussing on a single element, especially for video, images and games is well worth the few lines of code involved.

 

Have you implemented the Fullscreen API anywhere? What uses can you think of for it? Let us know in the comments.

Featured image/thumbnail, focus image via Shutterstock.

Share this post
Comments (no login required)
  • http://www.isotopon.com/ isotopon

    Is it really necessary this? I cant imagine how a typical website mess up in displays more than 1680 pixels wide

    • http://twitter.com/NikkitaFTW Sara Vieira

      It’s not a really necessary thing but its good if you provide videos on your website , canvas apps or games . It’s more of a utility for web apps

      • http://www.chromatix.com.au/ Josh Chan

        agree, I recently saw a demo of html5 fullscreen api on appspot. The video fullscreen toggle was fluid and seamlessly awesome, I think the demo also had an iframe toggle – I’m sure this’ll see some creative use soon enough.

    • http://www.blackbookoperations.com/ Black Book Operations

      Bigger! Better! Stronger! Faster! ;) but as Sara has replied already, there are certain places where this can come in handy. Though I have to admit, I too have not used the “full screen” ability that comes with many browsers anyway (unless it’s the icon on a youtube/vimeo embedded video/app

      • SamBrody

        We just used this on a project for a library, we built a kiosk system using Bootstrap/Jquery and PHP. Obviously it couldn’t have the browser screen so full screen mode did the trick!

  • http://www.gonzodesign.nl/ gonzodesign

    .. ehr, why do this for images? Why not just: background-size: cover;? This does exactly the same trick AND saves you tons of loading-time, especially on mobile devices!

    Agree tho that for video you most probably have to use the fullscreen API, but for simple images it’s better to use CSS imho!

    • http://twitter.com/NikkitaFTW Sara Vieira

      It depends on your website , if you want a full page backgroud image but the browser toolbars showing your idea is faster but this idea is more if you want your user to be completly focus on what you are showing him with no distractions

  • http://www.friv3.org.in/ friv3

    A mysterious and beautiful eyes I can see it through the picture above.thank you

  • Amit Partap

    Nice tutorial ,thanks for providing such a nice information.

  • http://www.frivmini.com/ friv

    wow. I will try it now. I will share with my friends.

  • http://www.yepi-yepi.com/ Yepi

    Agree tho that for video you most probably have to use the fullscreen API, but for simple images it’s better to use CSS imho!

  • http://www.yepi6.org/ yepi6

    is worth noting, I also like to watch the video in full screen

  • http://www.kizi-2.net/ kizi2

    thanks, your article will help me, my learning.

  • Jimmy

    HI, When I use javascript “window.open” in fullscreen mode, the popup window will also be fullscreen. If there’s any way to prevent the popup window from fullscreen mode?

  • http://www.frivgazo.com/ frivgazo

    i like your post

  • dhruv

    I think your cancel function is not correct…

    function fullScreenCancel() {
    if(document.requestFullScreen) {
    document.requestFullScreen();
    } else if(document .webkitRequestFullScreen ) {
    document.webkitRequestFullScreen();
    } else if(document .mozRequestFullScreen) {
    document.mozRequestFullScreen();
    }
    }

    should be like
    function cancelFullScreen() {
    var element = document.getElementById(‘id’);
    if(element.requestFullScreen) {
    element.cancelFullScreen();
    } else if(element .webkitRequestFullScreen ) {
    element.webkitCancelFullScreen();
    } else if(element .mozRequestFullScreen) {
    element.mozCancelFullScreen();
    }

  • Ravi Kumar

    wish some demo also available with this article. nice anyway :)

  • heisian

    try your own code, the cancel full screen is incorrect.

  • m3t3or

    Thanks, this helped me alot. Looks like it only works on some event-signal. Does not work when directly used in $(document).ready(function(){ });

  • http://blog.piecioshka.pl/ piecioshka

    Sara, thanks for nice article, but I think you make mistake about method ‘requestFullScreen’ becouse that method dosn’t exists in any specification. Instead of it exists method with name: ‘requestFullscreen’

    Hint: with small ‘s’ in ‘screen’ word.

  • Rajeshwari

    Nice Code…. Is it possible to call fullscreen function on page onload…