How do I overlay a canvas over a video

Question

I have a video and a canvas inside a div and I want to overlay the canvas over the video. I tried this:

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

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

.canvas {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

JSFiddle here

But for some reason the canvas does not cover the whole video, it is shorter. How do I fix that?

Answer 1

Canvas must have absolute width and height. When the video load you can assign the right width and height.

Here: jsfiddle: https://jsfiddle.net/7sk5k4gp/13/

PS: I put a red filter for better understanding.

Code above:

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

</style>
<div class="container">
  <video class="video" id="vd1" controls autoPlay      src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_sma    ll.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>

Answer 2

Adjusting the canvas's height to 100% makes sure the entire video is covered. The auto tag just adjusts the size of an object relative to the amount of data needed to be shown. E.g. for a <\p> tag with 'width:auto' the more text, the wider the tag etc. .container { margin: 0 auto; position: relative; }

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

.canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color:black;
  top: 0;
  left: 0;
  z-index: 10;
}