css - HTML5 视频容器比视频稍大

Question

我有一个 html5 视频 header ，它按预期工作，只有一个问题，即容器比视频高约 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;
}