Answer: How to responsively arrange an SVG tag to the above of the video tag's real playing area exactly?

answer re: How to responsively arrange an SVG tag to the above of the video tag's real playing area exactly?

Dec 4 '19

0

I solved this problem It just needs to calculate the video ratio and some offset values of the tags.

<video id="video" width="100%" height="100%" controls src="test.mp4"></video>
<svg id="svg" width="100%" height="100%" style="position: absolute; left:0px; background:gray; opacity:0.5; pointer-events: none;"></svg>

<script>
    const svgHandler = (e) => {
        let v = document.getElementById("video");

        let v_w =

…

Open Full Answer