无 JS 的全屏 HTML5 视频背景

Question

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

我需要视频具有响应性并保持宽高比。但是，为避免出现黑条，我希望视频填充 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，当前显示当纵横比与视口比不同时，上方和下方（左右也出现，虽然这很难看到）出现黑条。

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

编辑：

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

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

有人有什么想法吗？自从我的JSFiddle 之后，一切似乎都变得安静了……

Answer 1

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

来自 mdn：

封面
被替换的内容在填充元素的整个内容框的同时保持其纵横比的大小：它的具体对象大小是 解决为针对元素使用的宽度的覆盖约束和 高度。

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>

Answer 2

我相信 min-width 和 min-height 都设置为 100% 是正确的方法，但所有父 heights 也必须设置为 100% 才能正常工作。

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

<div class="container-fluid adjustedHeight">
  <div class="video-container">
    <video autoplay loop class="fillWidth">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
      Your browser does not support the video tag. I suggest you upgrade your browser.</video>
</div>

Answer 3

我不确定您是否要求全屏 w.r.t.浏览器窗口本身或整个显示器中的全屏，但如果是前者，我认为 以下帖子可能会帮助您解决问题：

http://slicejack.com/creating-a-fullscreen-html5-video-background-with-css/

Answer 4

这可能会奏效-

.video-container{
width:100vw;
height:100vh;
}

其中 vw 是视口宽度，vh 是视口高度。