How do I draw a shape on an HTML5 video using SVG?

Question

I am trying to draw shapes on top of an HTML5 video, but am having trouble figuring out how to do it. I know how to apply a mask on top of the video:

Answer 1

yes, css solution is one option. try to put those two elements above either in one div or (as jörn pointed out) with absolute positioning. z-index is very useful, to make sure your svg is really on top.

<div id="canvas">
    <video id="videoContainer"> (...) </video>

    <svg id="svgContainer"> (...) </svg>
</div>


<style> 
   canvas{ position:relative; width:480px; height:240px; }
   videoContainer{ position:relative; width:100%; height:100%; z-index:1 }
   svgContainer{ position:relative; width:100%; height:100%; z-index:2 }
</style>

Answer 2

use CSS position:absolute to position your SVG where you want it.

<style> svg { position:absolute; top:20px; left:40px; }</style>

the above example should positions the svg 20 px from the top of the page and 40px from the left