css - 背景视频全宽但不是高度(最好没有 JS)

Question

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

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

我想要一个网站的视频背景，其中背景覆盖 100% 的宽度，但只有一个特定的、像素定义的高度(比如 500 像素)。类似于当前 AirBnB 主页上的内容:https://www.airbnb.com/ .

而且，如果可能的话，我想尝试仅使用 HTML/CSS，而不使用 JS/jQuery(尽管如有必要，我会使用它)。

这可能吗？

谢谢。

Answer 1

居中技巧

我们可以尝试使用负顶部(或边距顶部)或左侧(或边距左侧)值使视频居中，但获得正确数量的像素以偏移视频并不容易。我实际上尝试过使用 calc() 和视口(viewport)单元，它在 Firefox 中有效，但在 Chrome 和 Safari 中失败了，总的来说它看起来非常神秘。不是一个好的解决方案!

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

这是图片中的粗略想法:

#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%; */
  }
}

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

但猜猜是什么像自动居中视频的容器一样工作？元素!所以我们可以跳过创建和使用 CSS 居中技术!现在我们只需要让我们的视频元素太高或太宽，让浏览器默认自动处理居中(它有点像带有背景大小:包含背景图像)。

完整引用 - http://fvsch.com/code/video-background/