JSFiddle - React, Tailwind, and code Playground

by dhwanilshah

HTML

<!DOCTYPE html> 
<html> 
<body> 
<div id="app">
<div id="main-video-container">
  <div id="inner-container">
    <video id="video-player" muted playsinline height='230' width='auto' preload="auto" >
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>
  <div id="my-controls">
    <button onclick="flipsIt()">
    Flip
  </button>
  <button onclick="callFullScreen()">
    Fullscreen
  </button>

  <button onclick="playVideo()">
    Play Video
  </button>
  
  <button onclick="pauseVideo()">
    Pause Video
  </button>
</div>
</div>
</div>


</body> 
</html>

CSS

#main-video-container {
  position: absolute;
  transform-origin: top left;
  -webkit-transform-origin: top left;
  width: 640px;
  height: 400px;
  background-color: #000;
  filter: none;
  top: 50px;
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}

#video-player {
  left: 126.5px;
  position: absolute;
  z-index: 9999;
  top: 103px;
}

#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

function flipsIt () {
	console.log('Flip')
	document.getElementById('main-video-container').style.transform = 'rotate(90deg)'
  document.getElementById('main-video-container').style.marginLeft = '80%'
}


function callFullScreen () {
  let elem = document.getElementById('app')
  toggleFullScreen(elem)
}

function playVideo () {
	document.getElementById('video-player').currentTime = 0
	document.getElementById('video-player').play()
}

function pauseVideo() {
	document.getElementById('video-player').pause()
}

function toggleFullScreen (elem) {
  const self = this
  const isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen)
  if (isInFullScreen) {
    self.cancelFullScreen(document)
  } else {
    self.requestFullScreen(elem)
  }
}

 function cancelFullScreen (el) {
      const self = this
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
      self.fullscreen = false
      // console.log(document.getElementById('controls1').style.visibility)
 }
  
 function requestFullScreen (el) {
      const self = this
      // Supports most browsers and their versions.
      const requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
      if (requestMethod) { // Native full screen.
        requestMethod.call(el)
        self.fullscreen = true
      }
      return false
  }