FullScreen Demo

by dhwanilshah

HTML

<html>
  <body>
    <button onclick="callFullScreen()">
      Go Fullscreen
    </button>
    <div id="container">
      <!-- Main container which is scaled to fit the screen -->
      <div id="main-video-container" class="video-container 2">
        <!-- Div which contains the video player -->
        <div id="video-player">
        </div>
      </div>
    </div>    
  </body>
</html>

CSS

#main-video-container {
  transform-origin: top left;
  width: 640px;
  height: 400px;
  background-color: #000;
}

#video-player {
	width: 600px;
	height: 400px;
	background-color: green;
  margin-left: auto;
  margin-right: auto;
}

/* STYLE FOR FULLSREEN */
#main-video-container:-webkit-full-screen {
  position: absolute;
  top:0;
  left: 0;
}
#main-video-container:-moz-full-screen {
  position: absolute;
  top:0;
  left: 0;
}
#main-video-container:-ms-fullscreen {
  position: absolute;
  top:0;
  left: 0;
}
#main-video-container:fullscreen {
  position: absolute;
  top:0;
  left: 0;
}

JavaScript 1.7

function callFullScreen () {
  var elem = document.getElementById('main-video-container')
  var el = document.getElementById('container')
  // Scaling parameters are calculated based on the screen sizes of the device to best fit the screen
  elem.style.transform = 'scale(2, 2)'
  // Supports most browsers and their versions.
  const requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
  if (requestMethod) { // Native full screen.
    requestMethod.call(el)
  }
}
var audio = document.createElement('audio')
var canPlayOGG = (typeof audio.canPlayType === 'function' && audio.canPlayType('audio/ogg') !== '')
var canPlayWAV = (typeof audio.canPlayType === 'function' && audio.canPlayType('audio/wav') !== '')

console.log('Can play OGG', canPlayOGG)
console.log('Can play WAV', canPlayWAV)