JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Insert Video: -->

<video width="400" id="myVideo">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>

<!-- Insert PLAY/PAUSE -->
<button id="button" onclick="playPause(); ">PLAY</button>

<!-- PLAY/PAUSE JS -->

<script>
var vid = document.getElementById("myVideo");
var isPlaying = false;

function playPause() {
  var change = document.getElementById("button");
  if (isPlaying) {
    vid.pause();
    change.innerHTML = "PLAY";
  } else {
    vid.play();
    change.innerHTML = "PAUSE";
  }
  isPlaying = !isPlaying;
}
</script>


<!-- Contributions -->

<br>
<small>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</small>

CSS

video {
  pointer-events: none;
}

JavaScript

//JavaScript is located inder HTML