HTML5视频容器略大于视频

Question

我有一个html5视频标头，仅按一个问题就可以正常工作，该容器比视频高4像素。除非容器在视频中覆盖了插入阴影，而且阴影略微延伸到视频下方，否则不会有什么问题。

我display: inline-block在父div上的某个地方读到了某个设置，该设置使它只能扩展到其子级的大小，但是在我尝试时并没有任何改变。

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