Date: May 24, 2012 Author: Pablo Schklowsky

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

    • Colin

      January 4, 2013 at 2:45 pm


      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?

    • Dev

      January 8, 2013 at 7:25 pm


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

      Thanks.

    • Ethan LongTail

      January 8, 2013 at 8:48 pm


      IE does not support native HTML5 fullscreen.

    • DEV

      January 9, 2013 at 6:03 am


      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

    • Ethan LongTail

      January 9, 2013 at 6:36 pm


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

    • Smitty

      January 24, 2013 at 4:25 pm


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

    • €quiman

      February 19, 2013 at 9:35 pm


      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?

    • Ethan LongTail

      February 19, 2013 at 10:01 pm


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

    • Oscar

      March 27, 2013 at 5:27 pm


      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.

    • Dominga

      June 5, 2014 at 9:33 am


      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.

    • Umer

      July 17, 2014 at 6:45 am


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

    • chase

      July 13, 2012 at 1:37 am


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

    • PabloS

      July 13, 2012 at 7:36 pm


      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.

    • ed rocha

      October 11, 2012 at 2:58 pm


      Hi
      And for mobile or tablet web browsers?

    • Ethan LongTail

      October 11, 2012 at 3:59 pm


      Not sure what you are asking?

    • Imnajungshi

      October 25, 2012 at 10:02 am


      :( doesnt work on ie

    • Ethan LongTail

      October 25, 2012 at 7:16 pm


      Do you have a link?

    • SirRasor

      December 2, 2012 at 4:47 pm


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

      Great article, and works perfectly :)

Leave a comment

Your email address will not be published



We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our Comments Policy