Using the Browsers’ New HTML5 Fullscreen Capabilities

One of the killer features for HTML5 video is native browser fullscreen support. Without it, a viewer watching video through HTML5 is limited to seeing the video within the browser window, which is clearly not an immersive experience. In our latest State of HTML5 Video report, we reported that 50% of the browsers people are using now support fullscreen features natively. Some sites you probably currently use (Facebook, for one, in their image galleries) are already using the native browser fullscreen APIs. Here at LongTail, we are bringing this functionality into the next version of the JW Player, but in the meantime, I’ll walk you through the new feature, and show you how easy it is to implement.

Note: This article is aimed at website developers who are comfortable editing HTML and CSS, and a little bit of JavaScript

What is Native Fullscreen Anyway?

Native fullscreen means that the browser uses your entire monitor to display content. This means that no other windows are visible, and the browser’s menu, tabs, and other elements go away. Compare these two screenshots:

Step 0: Use a Fullscreen Enabled Browser

None of this new functionality will work if your browser doesn’t support it. Currently only Google Chrome version 15+, Firefox 10+ and Safari 5.1+ support fullscreen mode. Make sure you have the latest versions of those browsers for these examples to work!

Upcoming versions of the major browsers will all include fullsceen support in some form. Internet Explorer 10 (currently in beta) will provide support, and Opera (who were involved in writing the fullscreen draft spec) are likely not far behind.

Step 1: Decide What to Fullscreen

First, you’ll need to create a bit of HTML, and decide what element to blow up to fullscreen when the time comes. Here’s a little bit of code containing an image which we’ll eventually take to full-screen.

Example code:
<div class="example">
  <img class="video_player" src="image.jpg"></img>
  <button>Click Me To Go Fullscreen! (not yet)</button>
</div>

Step 2: Tell the Browser To Go Fullscreen

You’ll notice that in the above code, our fullscreen button doesn’t do anything yet. We’ll need to write some JavaScript which will take the image into fullscreen mode. I’ll explain what everything does in the code itself.

Example code:
<script type="text/javascript">
  function goFullscreen(id) {
    // Get the element that we want to take into fullscreen mode
    var element = document.getElementById(id);
    
    // These function will not exist in the browsers that don't support fullscreen mode yet, 
    // so we'll have to check to see if they're available before calling them.
    
    if (element.mozRequestFullScreen) {
      // This is how to go into fullscren mode in Firefox
      // Note the "moz" prefix, which is short for Mozilla.
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      // This is how to go into fullscreen mode in Chrome and Safari
      // Both of those browsers are based on the Webkit project, hence the same prefix.
      element.webkitRequestFullScreen();
   }
   // Hooray, now we're in fullscreen mode!
  }
</script>

<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>

Step 3: Resize Your Elements

You may have noticed on some browsers (Opera and Chrome) that when you clicked on the fullscreen button that the video player was centered in the middle of a big black screen. That’s because by default, fullscreen mode doesn’t resize your elements for you. Luckily, there’s a simple bit of CSS which will allow you to specify how you want your elements to appear in fullscreen mode. It’s called something different in each browser, but in Chrome, it’s a CSS pseudo-class called :-webkit-full-screen. In Firefox, it’s called :-moz-full-screen. We want our player example to strech all the way across the screen, so that’s what we’ll do.

Example code:
<style type="text/css">
  .player:-webkit-full-screen {
    width: 100%;
    height: 100%;
  }
  .player:-moz-full-screen {
    width: 100%;
    height: 100%;
  }
</style>
<img class="video_player" src="image.jpg" id="player3"></img>
<button onclick="goFullscreen('player');">Click Me To Go Fullscreen! (All the way)</button>

Fullsceen and <iframe> – a technical note

While you can take pretty much any element and take it to fullscreen mode, <iframe> elements are a bit trickier. You’ll need to set the “allowFullScreen” property on the tag itself, which allows the contents to be taken into fullscreen mode.

<iframe src="iframe_src.html" width="400" height="300" allowFullScreen></iframe>

Where Do We Go From Here?

You can make all sorts of changes to your fullscreen elements once you’re in fullscreen mode, either using CSS or using some more in-depth JavaScript code. For example, if you had a text overlay that you wanted to make visile in fullscreen mode, you could show it using the -full-screen CSS pseudo class (remember, you need to replicate this property for each browser). The rest is up to your imagination!

23 Comments

  1. Ethan LongTail January 9, 2013 - 06:06 EST

    That isn’t native html5 full screen, it is opening up a pop up window.

  2. Colin January 4, 2013 - 02:50 EST

    I used your code to make my page full screen, however when it refreshes it kicks it out of full screen, any way to keep it full screen even during constant refreshing?

  3. Ethan LongTail January 4, 2013 - 05:29 EST

    Contact us with an example – http://www.longtailvideo.com/contact-us

  4. Oscar March 27, 2013 - 05:54 EST

    Hi, great article!

    I am trying to show an image on top of a full screened iframe with a youtube embedded player. z-index does not work. Do you have any ideas. My e-mail address is mariani.oscar (at) gmail (dot) com.

    Thank you very much.

  5. Ethan LongTail March 27, 2013 - 05:06 EST

    If you are having issues with the JW Player specifically, we can help you with that.

    http://www.longtailvideo.com/contact-us

  6. €quiman February 19, 2013 - 09:46 EST

    This code works in FF but don’t work good in Chrome with a DIV (Google Maps API).

    How can I detect when Exits Full Screen?

  7. Ethan LongTail February 19, 2013 - 10:12 EST

    I’m not sure if there is an event that detects that sort of thing.

  8. Smitty January 24, 2013 - 04:42 EST

    I can make this work for one image, but not multiple different images on a single html page. how is that possible?

  9. Dev January 8, 2013 - 07:00 EST

    This is not working in internet explorer…. Can u please guide me, what to do to make it working in IE.

    Thanks.

  10. Ethan LongTail January 8, 2013 - 08:03 EST

    IE does not support native HTML5 fullscreen.

  11. Ethan LongTail January 24, 2013 - 06:05 EST

    Email us a link – http://www.longtailvideo.com/contact-us

  12. DEV January 9, 2013 - 06:41 EST

    Thank you for a quick reply Ethan

    Was going through a url…. slideshare.net
    It shows the slide in full screen. Can you please take a look? Can we go this way?

    Thanks much!
    Best Regards

  13. Dominga June 5, 2014 - 09:47 EST

    I enjoy what you guys are up too. This type of clever work and reporting!
    Keep up the superb works guys I’ve added you guys to my
    personal blogroll.

  14. Umer July 17, 2014 - 06:47 EST

    I want to know that whether can we shift to normal screen on clicking
    the same button???

  15. PabloS July 13, 2012 - 07:45 EST

    JW Player 6 will include support for native browser fullscreen in HTML5 (for the browsers that support it, obviously). I can’t provide a specific timeline for JW6, but it will be sometime in the next few months.

  16. Guest July 23, 2012 - 03:42 EST

    Great solution.
    Now fullscreen is supported API of John Dyer (http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/) is not work on IE right now.
    I find out another that someone has improve that API to work with IE at http://xme.im/display-fullscreen-website-using-javascript

  17. Fabien Quatravaux July 19, 2012 - 12:18 EST

    Hi Pablo
    I have done a patch to add native fullscreen support to JWPlayer 5.9. You can find it here : http://pastebin.com/aMuHXedH
    It integrates the fullscreen API published by John Dyer (http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/)

  18. ed rocha October 11, 2012 - 02:38 EST

    Hi
    And for mobile or tablet web browsers?

  19. Ethan LongTail October 11, 2012 - 03:16 EST

    Not sure what you are asking?

  20. Imnajungshi October 25, 2012 - 10:57 EST

    :( doesnt work on ie

  21. SirRasor December 2, 2012 - 04:52 EST

    This is just what I was searching for all day long!

    Great article, and works perfectly :)

  22. Ethan LongTail October 25, 2012 - 07:23 EST

    Do you have a link?

  23. chase July 13, 2012 - 01:21 EST

    Is there a timeline for when this will be implemented? Can you not just hijack the fullscreen event from the JWPlayer JS API?

Post a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>