HTML5ビデオコンテナがビデオよりわずかに大きい

Question

1つの問題で予想どおりに動作するhtml5ビデオヘッダーがあります。コンテナの高さは約4ピクセルです。コンテナにビデオを覆う挿入シャドウがあり、ビデオのわずかに下に伸び、見栄えが悪いという点を除いて、それは問題ではないでしょう。

私は親のdivの設定をdisplay: inline-blockと読んだだけで、子どもの大きさだけ大きくなりましたが、試しても何も変わっていません。

CSS

html { 
    height: 100%; 
} 
body { 
    height: 100%; 
    margin: 0; 
} 
video { 
    width: 100%; 
    height: 100%; 
} 

.vidContainer { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 
.vidShadow { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    -webkit-box-shadow: inset 0 0 0 500px rgba(0,0,0,.5); 
    -moz-box-shadow: inset 0 0 0 500px rgba(0,0,0,.5); 
    box-shadow: inset 0 0 0 500px rgba(0,0,0,.5); 
} 

HTML

<div class="vidContainer"> 
    <video loop autoplay> 
     <source src="media/headerVideo.webm" type="video/webm"> 
     <source src="media/headerVideo.mp4" type="video/mp4"> 
    </video> 
    <div class="vidShadow"></div> 
</div> 

Answer 1

これを試してください：

video { 
    width: 100%; 
    height: 100%; 
    display: flex; 
}