Fullscreen API use's case example

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Fullscreen example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="fullscreen-content">
    <h1 class="slowly-pronounced">Fullscreen example</h1>
    <p class="low-pitch-voice">HTML5 API's:</p>
    <p class="high-pitch-voice">the present!</p>
  </div>

  <script src="Fullscreen.js"></script>
  <script src="script.js"></script>
</body>
</html>

/* globals alert, console, define, module */
(function(window) {
  'use strict';
  
  var Fullscreen = new window.Fullscreen('#fullscreen-content');

  document.addEventListener('keydown', function(e) {
    e.preventDefault();
    switch (e.keyCode) {
      // Click "e" exit fullscreen
      case 69:
        Fullscreen.exitFullscreen();
        break;
      // Click "f" for fullscreen
      case 70:
        Fullscreen.enterFullscreen();
        break;
    }
  }, false);
      
})(window);

html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Quicksand', 'Helvetica Neue',Helvetica,Arial, sans-serif;
  font-size: 18px;
  background: #E7E7E7;
  font-weight: 500;
  color: #666;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  voice-family: male;
  stress: 20;
  richness: 90;
  cue-before: url("pop.au");
  font-family: 'Montserrat', 'Helvetica Neue',Helvetica,Arial,sans-serif;
}

div{
  background: #FFF;
  padding: 10px;
  border-radius: 5px;
  width: 90%;
  margin: 10px auto;
  color: #555;
}

div p{
  speech-rate: fast;
  richness: 100;
  pause-before: 3;
  pause-after: 3;
}

This is a example of Fullscreen API use's case example

/* globals alert, console, define, module */
(function(window) {
  'use strict';

  /**
   * Init Fullscreen API
   * @return {[type]} [description]
   */
  function Fullscreen(fullscreenEl){
    document.cancelFullScreen = document.webkitExitFullscreen || document.mozCancelFullScreen || document.exitFullscreen;
    this.fullscreenEl = document.querySelector(fullscreenEl);
  }

  /**
   * Toggle event for fullscreen
   * @param  {[type]} el [description]
   * @return {[type]}    [description]
   */
  Fullscreen.prototype.toggleFullScreen = function(el) {
    if (el.webkitEnterFullScreen) {
      el.webkitEnterFullScreen();
    } else if (el.mozRequestFullScreen) {
      el.mozRequestFullScreen();
    } else {
      el.requestFullscreen();
    }
    el.ondblclick = this.exitFullscreen;
  }

  /**
   * Called whenever the browser exits fullscreen
   * @return {[type]} [description]
   */
  Fullscreen.prototype.onFullScreenExit = function() {
    console.log('Exited fullscreen!');
  }
  
  /**
   * Event fired on fullscreen activation
   * @return {[type]} [description]
   */
  Fullscreen.prototype.onFullScreenEnter = function() {
    this.fullscreenEl.onwebkitfullscreenchange = this.onFullScreenExit;
    this.fullscreenEl.onmozfullscreenchange = this.onFullScreenExit;
  };

  /**
   * Event fired for fullscreen enter
   * Note: FF nightly needs about:config full-screen-api.enabled set to true.
   * @return {[type]} [description]
   */
  Fullscreen.prototype.enterFullscreen = function() {
    this.fullscreenEl.onwebkitfullscreenchange = this.onFullScreenEnter;
    this.fullscreenEl.onmozfullscreenchange = this.onFullScreenEnter;
    this.fullscreenEl.onfullscreenchange = this.onFullScreenEnter;
    if (this.fullscreenEl.webkitRequestFullscreen) {
      this.fullscreenEl.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (this.fullscreenEl.mozRequestFullScreen) {
      this.fullscreenEl.mozRequestFullScreen();
    } else {
      this.fullscreenEl.requestFullscreen();
    }
    console.log('enterFullscreen()');
  }

  /**
   * Event fired for exit fullscreen
   * @return {[type]} [description]
   */
  Fullscreen.prototype.exitFullscreen = function() {
    console.log('exitFullscreen()');
    document.cancelFullScreen();
  }

  /**
   * Export information for application via patterns
   *
   * - commonjs
   * - amd
   * - javascript default
   */
  if (typeof define !== 'undefined' && define.amd) {
    // AMD. Register as an anonymous module.
    define(function() {
      return Fullscreen;
    });
  } else if (typeof module !== 'undefined' && module.exports) {
    module.exports = Fullscreen.attach;
    module.exports.Fullscreen = Fullscreen;
  } else {
    window.Fullscreen = Fullscreen;
  }

})(window);