HTML5视频容器比视频稍大

Question

我有一个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; 
}