Month: January 2013

How to do fullscreen in JavaScript and CSS

I’ve been using the YouTube JavaScript Player API for a project. Something that I needed to figure out was how to create fullscreen controls for my custom video player. Here’s how:

Take the element (probably a div) to be full-screened, and full-screen it with the following JavaScript:

var c = document.getElementById('id_of_div_being_fullscreened'); 
// Browser specific fullscreening:
if (c.requestFullScreen) {
  c.requestFullScreen();
} else if (c.mozRequestFullScreen) {
  c.mozRequestFullScreen();
} else if (c.webkitRequestFullScreen) {
  c.webkitRequestFullScreen();
}

Now, what happens is fun. We can assign CSS properties to elements that are different in full-screen mode than regular mode. When in full-screen mode, the browser adds a class name of :-webkit-full-screen to full-screened elements. There’s probably one for Firefox called :-moz-full-screen, and one for other browsers called :-full-screen. How to use it:

  .MyPlayer:-webkit-full-screen {
    margin-top:0px;
    display:block;
    width:100%;
  }

  .MyPlayer:-webkit-full-screen .DefaultControls {
    z-index:2;
    display:block;
    top: 0px;
    position:absolute;
  }

As an aside: I noticed something while browsing through videos on Vimeo and YouTube: in this day of excellent HTML5 video, they still use Flash. Why? Because the Flash experience is the same across all browsers. When we try to full-screen a video, regardless of browser, the video instantly becomes full-screen, along with the controls, which behave appropriately. I bet the folks that worked on the Flash control don’t have to worry about detecting what browser the user is in.