JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <video class="video" id="vd1" controls autoPlay  src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" onplay="resize_canvas(this)"></video>
  <canvas class="canvas" id="cv1"></canvas>
</div>
<script>

function resize_canvas(element)
{
	var w = element.offsetWidth;
  var h = element.offsetHeight;
  var cv = document.getElementById("cv1");
  cv.width = w;
  cv.height =h;
  

}


</script>

CSS

.container {
  margin: 0 auto;
  position: relative;
}

.video {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background-color:rgba(255,0,0,0.5);
}