JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<button class="play">play-pause</button>

<video id="vividComVideo" autoplay muted>
  <source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_1920_18MG.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

CSS

* {
  margin: 0;
  box-sizing: border-box;
}
body {

  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;

}

video {
	min-width: auto;
  min-height: 100%;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

button {
  position: relative;
  z-index: 1;
}

JavaScript

var vividComVideo = document.getElementById("vividComVideo");
var videoTrigger = document.getElementsByClassName("play")[0];

videoTrigger.addEventListener('click', function(e)
{
  if(vividComVideo.paused)
  {
    vividComVideo.play();
  }
  else
  {
    vividComVideo.pause();
  }

}, false);