How Can I Get This Html5 Fullscreen Function Working In Firefox Too?

I want to have a button that will trigger fullscreen mode using the HTML5 fullscreen API. I followed some examples around the web to get the code below, but it only works in Safari

Solution 1:

You can try something like this:

var cancelFullScreen = document.cancelFullScreen 
  || document.webkitCancelFullScreen
  || document.mozCancelFullScreen 
  || document.msCancelFullScreen;

var requestFullScreen = document.requestFullScreen 
  || document.webkitRequestFullScreen
  || document.mozRequestFullScreen 
  || document.msRequestFullScreen;

$('.fullscreen').on('click', function(){
  var elem = document.getElementById('viewer');
  var fullscreenElement = document.fullscreenElement 
    || document.webkitFullscreenElement
    || document.mozFullscreenElement 
    || document.msFullscreenElement;

  if (fullscreenElement) {
    cancelFullScreen.call(document);
  } else {
    requestFullScreen.call(document);
  };
});