css - 没有 JS 的全屏 HTML5 视频背景

Question

我想在我的网站上创建一个全屏视频背景，最好只使用 HTML 和 CSS。我还需要将视频背景固定在页面顶部，这样用户的第一个 View 完全被视频覆盖，然后他们可以向下滚动并移过视频。

我需要视频响应并保持纵横比。但是，为了避免黑条，我希望视频 100% 填充最小的尺寸(宽度或高度)，然后溢出另一个尺寸的视频。

到目前为止，这是我的解决方案...

<div class="container-fluid adjustedHeight">
  <div class="video-container">
    <div class="row">
      <div class="col-md-12"></div>
    </div>
    <div class="row Page1">
      <div class="col-md-6 button1">
        <button type="button" class="btn btn-primary btn-lg outline">Pre-Order</button>
      </div>
      <div class="col-md-6 button2">
        <button type="button" class="btn btn-primary btn-lg outline">About Us</button>
      </div>
    </div>
    <video autoplay loop class="fillWidth">
      <source src="Images/Comp 2.mp4" type="video/mp4" />
      Your browser does not support the video tag. I suggest you upgrade your browser.</video>
    <div class="poster hidden"> <img src="http://www.videojs.com/img/poster.jpg" alt=""> </div>
  </div>
</div>

CSS:

.video-container {
  position: relative;
  bottom: 0%;
  left: -15px;
  height: 100% !important;
  width: 100vw;
  overflow: hidden;
  background: #000;
  display: block !important;
}

.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
}

.video-container video.fillWidth {
  min-width: 100%;
  min-height: 100%;
}

它适用于宽度，但如果高度对于视频来说太大，我会得到黑条，即宽度不会溢出。我如何定义它以确保宽度和高度都至少 100% 填充？我认为 min-height 和 min-width 属性可以做到这一点，但是这会将高度和宽度都缩放到超过 100%，并且当我调整大小时，视频不会缩放，它只会切断更多视频的宽度(并且不会使视频居中)。然而，如果我只使用 .video-container video.fillWidth CSS 属性中的宽度和高度定义，我确实会集中获取视频，但会出现黑条。

这是一个JSFiddle目前显示，当宽高比与视口(viewport)比不同时，黑条出现在上方和下方(也出现在左侧和右侧，尽管这很难看到)。

注意:我使用的是 bootstrap 3，我的 adjustedheight 属性为导航栏留出了空间。

编辑:

为了回答关闭请求，链接的问题已经回答需要 JS，我不想使用它。

感谢您的帮助，我真的很想解决这个问题，因为根据我的代码应该做什么，它似乎没有意义 - 不确定我哪里出错了......

有没有人有什么想法？自从我的 JSFiddle一切似乎都归于平静……

Answer 1

我不确定我是否完全满足您的要求，但在我看来您正在寻找 object-fit属性，值为 cover。

来自 mdn :

cover
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.

html,
body,
div.video-container,
video
 {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

video{
  height: 100%;
  width: 100%;
  object-fit : cover;
}

.video-container {
  overflow: hidden;
  background: #000;
  display: block !important;
  position: relative;
}

.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
}

.title-container {
  z-index: 10;
  color: #FFF;
  position: absolute;
}

.adjustedHeight {
  height: calc(100% - 77px);
  width: 100%;
  padding: 0;
}

<div class="container-fluid adjustedHeight">
  <div class="video-container">
    <div class="row">
      <div class="col-md-12"></div>
    </div>
    <div class="row Page1">
    </div>
    <video autoplay loop class="fillWidth">
      <source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" /> Your browser does not support the video tag. I suggest you upgrade your browser.</video>
    <div class="poster hidden"> <img src="http://www.videojs.com/img/poster.jpg" alt=""> </div>
  </div>
</div>