摆脱视频背景空方 - CSS

Question

所以我正在制作一个网站，我的索引页面中有视频背景。这是我的标记：

HTML：

<div class="background-video">
  <video autoplay loop poster="<?php echo ROOT_HOST; ?>res/img/video-thumbnail.jpg">
    <source src="<?php echo ROOT_HOST; ?>res/videos/bg.mp4" type="video/mp4" />
    <source src="<?php echo ROOT_HOST; ?>res/videos/bg.webm" type="video/webm" />
  </video>
</div>

CSS：

.background-video{
  width: 100vw;
  height: 100vh;
  position: relative;
}

.background-video video{
  width: 100%;
  height: 100%;
  z-index: -1;
}

当我的浏览器打开时，屏幕的完整和高度可以正常工作，但是当我改变浏览器的宽度时，我得到顶部和底部的空白区域。如何解决此问题并放大视频，使其仍具有浏览器的全宽和高度？

当我使用以下命令更改浏览器时会发生这种情况：