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