为什么视频元素的海报属性导致我的视​​频偏移？

Question

我有一个包含HTML5视频的div作为背景。我使用-Z-index替换它以在顶部覆盖徽标。当我在视频元素中包含poster属性时，我无法弄清楚为什么包含视频的div在菜单栏和它自身之间放置了一个边距。

注意：当我删除视频元素时，这可以正常工作。

为了演示目的，附加的屏幕截图有不同的菜单栏正文和背景颜色，但这里有一个指向我网站的链接： http://eldonutshoppe.com/index2.html

以下是我的问题代码：

HTML：

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed hidden" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

      <ul class="nav navbar-nav navbar-left">
        <li><a target="_blank" href="https://www.facebook.com/donutshoppe/"><img class="socialmedia" src="img/dsfb.svg"></a></li>
        <li><a target="_blank" href="https://instagram.com/donutshoppe/"><img class="socialmedia" src="img/dsinstagram.svg"></a></li>
        <li><a target="_blank" href="https://www.youtube.com/channel/UC7OPBnAhkrik-ZY1M2kk9Xw"><img class="socialmedia" src="img/dsyoutube.svg"></a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Subscribe to our Newsletter</a></li>
      </ul>

  </div>
</nav>

<!-- Begin page content -->
<div class="container-fluid">
  <div class="bg-video col-md-12 hidden-sm hidden-xs">

      <video preload="auto"  poster="/img/eldonutshoppe.svg" autoplay loop muted>
          <source src="video/uncletonyloop.mp4" type="video/mp4"/>
          <source src="video/uncletonyloop.webm" type="video/webm"/>
      </video>

      <div class="sslogo-video">
        <img class="sslogo-big" src="img/eldonutshoppe.svg">
        <br>
        <a href="http://www.eldonutshoppe.com/store/" class="btn btn-primary btn-lg cta" role="button">Browse our Record Collection</a>
      </div>

  </div>
</div>

CSS：

.bg-video{
    height:100vh;
    padding: 0;
}

video{
    width:100%;
    opacity:.3;
    position: fixed;
    z-index: -100;
}

参考图像，我无法弄清楚导致菜单栏和视频之间的“空白区域”的原因。 （在网站本身，“白色空间”是黑色的。

Answer 1

在第96行的app.css中查看了您的网站 改变以下内容：

.video {
    position: absolute; <-- its currently set to fixed
}

应该做的伎俩：）

Answer 2

我认为问题是poster元素中的video属性，它在视频开始加载之前以某种方式改变了维度，并且它变得可用。由于您已在另一个div中拥有相同的图像，因此您可以尝试删除海报属性。

如果有效，请告诉我。