JSFiddle - React, Tailwind, and code Playground

HTML

<div class="video-container">
  <video src="https://goo.gl/pWGuVD" width="100%" height="100%">      </video><br>
  <div>
    <input type="range" id="seek-bar" min="0" max value="0" onchange="seekProgress()">
  </div>
</div>
<button onclick="playPause()">
Play/Pause
</button>

<script>
	var player = document.querySelector("video");
  function playPause(){
  	if(player.paused){
    	player.play();
    } else {
    	player.pause();
    }
  }
</script>

CSS

* {
  padding: 0;
  margin: 0;
}

.video-container {
  width: 360px;
  height: 240px;
  background: black;
}

.video-container div {
  position: absolute;
  width: inherit;
}
input[type="range"]{
  position: absolute;
  margin-top: -40px;
  padding: 0px 5%;
  width: 90%;
}

JavaScript

var videoRangeTime = document.getElementById("seek-bar");

window.setInterval(function(){
	videoRangeTime.max = player.duration;
	videoRangeTime.value = player.currentTime;
}, 200)
            
function seekProgress(){
	player.currentTime = videoRangeTime.value;
}