背景视频全宽但不是高度（理想情况下没有JS）

Question

我在这里和其他地方搜索过这个问题的答案，但找不到它。

我知道这与其他问题类似，但请耐心等待。

我想要一个网站的视频背景，其中背景覆盖100％的宽度，但只有特定的，像素定义的高度（比如500px）。与当前AirBnB首页上的内容类似：https://www.airbnb.com/。

并且，我想尝试使用HTML / CSS，而不使用JS / jQuery，如果可能的话（尽管必要时我会使用它）。

这可能吗？

感谢。

Answer 1

中心抄袭

我们可以尝试使用负顶部（或边距顶部）或左边（或边距左边）值来对视频进行居中，但是获取正确数量的像素来偏移视频并不容易。我实际上尝试使用calc（）和视口单元，它在Firefox中运行并且在Chrome和Safari中失败，总体而言它看起来非常神秘。不是一个好的解决方案！

那么，如果我们不知道它的确切尺寸，我们如何将比视口更宽或更高的东西居中？简单！我们制作了一个大视频容器，它比视频大，比视口大。

这是图片中粗略的想法：

#myvid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (min-aspect-ratio: 16/9) {
  #myvid {
    height: 300%; top: -100%;
    /* or height: 200%; top: -50%;
       or height: 400%; top: -150%; */
  }
}
@media (max-aspect-ratio: 16/9) {
  #myvid {
    width: 300%; left: -100%;
    /* or width: 200%; left: -50%;
       or width: 400%; left: -150%; */
  }
}

虚线轮廓仍然是我们的视口，我们的视频是浅色矩形，黑暗区域代表我们的大屁股容器。然后我们可以使用我们选择的任何CSS居中技术（例如，Flexbox）将视频置于容器内。

但是猜猜什么就像一个自动居中视频的容器？元素！所以我们可以跳过创建和使用CSS居中技术！现在我们只需要让我们的视频元素太高或太宽，让浏览器自动处理中心，默认情况下（它有点像背景大小：包含背景图像）。

完整参考 - http://fvsch.com/code/video-background/

Answer 2

您是否尝试过使用视口缩放？

<video id="video" width="100vw" height="500px" controls autoplay>
    <source src="content/video/video.mp4" type="video/mp4">
    <source src="content/video/video.ogg" type="video/ogg">
</video>

在这里你可以看到宽度被设置为视口宽度的100％，相当于javascript中的window.innerWidth。

此外，设置固定高度会严重限制您的网站响应能力。

---

<强>更新

到目前为止，我们仍无法在CSS中设置background-vdeo，但以下代码段应该可以帮助人们顺利完成。

正如@ummahusla所提到的，尝试覆盖视频的宽高比存在一个问题，因为视频总是位于视频框的中间。大多数屏幕都是16：9，因此保持视频中的比例可以防止这种情况发生。

请注意在视频中使用poster图片 - 这会阻止您的网站在加载视频之前看到sparce。

使用纯CSS和HTML：

video#bgvid {
  position: fixed;
  top: 0;
  left: 50%;
  min-width: 100%;
  width: 100%;
  height: auto;
  /*height: 500px;*/
  z-index: -100;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-size: cover;
}
h3 {
  color: #fff;
}

<video playsinline autoplay muted loop id="bgvid" poster="http://placehold.it/350x150">
  <source src="https://11-lvl3-pdl.vimeocdn.com/01/2754/1/38772314/89366703.mp4?expires=1480575828&token=0069911f2c4e6972f2d2c" type="video/mp4">
</video>
<h3>HEADING</h3>

有关详细信息，请参阅：http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video