DEV Community

Max
Max

Posted on

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

<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>
    //some test code
    let v = document.getElementById("video");
    const testHandler = () => {
        let v_w = v.videoWidth;
        let v_h = v.videoHeight;
        let c_w = v.clientWidth;
        let c_h = v.clientHeight;
        console.log(v_w, v_h, c_w,

Top comments (0)