Steve Rydz

introducing the javascript fullscreen api

I’ve been working on a new widget over the past couple of weeks, and one of the requirements of this feature was fullscreen functionality.

I’d never made anything that could go fullscreen before now, so I did a little Googling. I was expecting this to be one of the most complicated parts of this task, but it turned out to be relatively simple, as browsers now support a JavaScript fullscreen API.

entering fullscreen mode

Like a lot of modern JavaScript, some browsers still use vendor prefixes for this functionality, which means we have to do a bit of tidying up before we can use it. Here is an example of what I did to activate fullscreen mode:

// wrapper to take care of vendor prefixes
function goFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// call function with element to go fullscreen
goFullscreen(document.getElementById('my-element');

leaving fullscreen mode

By default you can press the esc key to exit fullscreen mode, but you may wish to trigger this manually in some way too. The code to do this is very similar to the requestFullscreen code:

// wrapper to take care of vendor prefixes
function exitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

// call function to exit fullscreen
exitFullScreen();

styling in fullscreen mode

It’s likely that you’d want to use different styles when in fullscreen mode, and thankfully, there are a few pseudo-classes we can use to do this. Again, some browsers use prefixes, so there will unfortunately be some repetition:

:-webkit-full-screen {
  /* Styles */
}

:-moz-full-screen {
  /* Styles */
}

:-ms-fullscreen {
  /* Styles */
}

:fullscreen {
  /* Styles */
}

So that was a lightning quick introduction to the JavaScript fullscreen API, but what you’re able to do with this small amount of code is pretty exciting, and is hopefully enough to encourage you to explore this in more depth.

blog comments powered by Disqus