FullscreenToggler

by Konstantin Cryman

HTML

<button id="fullScreenToggler">Toggle Fullscreen</button>

CSS

#fullScreenToggler{
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate( -50%, -50% );
}

JavaScript

var Fullscreen = new function(){
        var FSCR = this;
        // var document
        FSCR.request = function(){
            if (document.body.requestFullScreen) {
                document.body.requestFullScreen();
            } else if (document.body.mozRequestFullScreen) {
                document.body.mozRequestFullScreen();
            } else if (document.body.webkitRequestFullScreen) {
                document.body.webkitRequestFullScreen();
            }
        };
        FSCR.cancel = function(){
            if (document.cancelFullScreen)  {
                document.cancelFullScreen()
            } else if (document.msCancelFullScreen) {
                document.msCancelFullScreen()
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen()
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen()
            }
        };
        document.onwebkitfullscreenchange = function() {
            var fullscreenElement = document.fullscreenElement || 
            												document.mozFullscreenElement || 
                                    document.webkitFullscreenElement;
            if (fullscreenElement == null) {
            } else {
            }
        };
    };
    
   
    var fsOn = false;
    var fsToggler = document.getElementById('fullScreenToggler');

    fsToggler.addEventListener('click', function(){
      if( fsToggler ) {
        if( fsOn ) Fullscreen.cancel();
        if( !fsOn ) Fullscreen.request();
        fsOn = !fsOn;
      }
    }, false);