ビデオにキャンバスをオーバーレイするにはどうすればいいですか？

Question

div内にビデオとキャンバスがあり、ビデオ上にキャンバスをオーバーレイしたいと思います。私はこの試みた：

.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をしかし、キャンバスがビデオ全体をカバーしていない何らかの理由で、それは短いです。どうすれば修正できますか？

Answer 1

キャンバスの高さを100％に調整すると、ビデオ全体がカバーされます。自動タグは、表示する必要があるデータの量に対するオブジェクトのサイズを調整するだけです。例えば。 。コンテナ{ マージン：0自動;タグの幅が広いほど、幅は広くなります。 位置：相対; }

.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; 
} 

Answer 2

キャンバスには絶対幅と高さが必要です。ビデオの読み込み時に、適切な幅と高さを割り当てることができます。ここで

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

PS：私はより良く理解するために赤色フィルターを置きます。

上記コード：

<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>