如何创建响应式视频 (HTML5) 背景？答案

【问题标题】：How to create responsive video (HTML5) background?如何创建响应式视频 (HTML5) 背景？
【发布时间】：2019-06-18 18:35:36
【问题描述】：

我偶然发现了这个网站：https://hinge.co/，并尝试按照 HTML/CSS 来了解他们如何拥有流畅、响应式的 HTML5 视频背景。

我遇到了几个我不明白的属性，例如：

max-width: calc(177.778vh);
height: calc(56.25vw);

我知道这是他们正在使用的 JS 插件，并且 calc 中的值是动态的。但是为什么 vh 高度会超过 100？那不会比视口本身更大吗？视频似乎是确切的视口大小，所以我不明白这里的逻辑。

以前是否有人创建过类似的东西并且可以帮助理解它是如何完成的？

【问题讨论】：

calc() 是 CSS 方法，vh 是相对长度 CSS 单位，代表 Relative to 1% of the height of the viewport。
超过 100 个溢出容器，如果溢出设置为 hidden，则实际上会放大视频。它填充了您的视口，因此您认为它是完美的边到边，但实际上源视频比您的屏幕大，因此您看到的是放大版本。

【解决方案1】：

我已经检查了代码，这两条特定的行并没有做更多的事情，只是限制了视频的放大程度。

诀窍是什么

min-height: 100vh;
min-width: 177.77vh;

无论视频大小/形状（垂直或水平）如何，都能保证视频覆盖整个屏幕甚至更多。

【讨论】：

【解决方案2】：

我偶然发现了这个网站：https://hinge.co/，并尝试按照 HTML/CSS 来了解他们如何拥有流畅、响应式的 HTML5 视频背景。

他们没有使用 HTML5 视频元素。他们嵌入了来自 Vimeo 的视频，然后用 CSS 定位它。

我知道这是他们正在使用的 JS 插件，以及 calc 中的值是动态的。但是为什么 vh 高度会超过 100？

他们这样做可能是为了在任何屏幕尺寸下保持视频的宽高比正确。

不会比视口本身大吗？视频好像是确切的视口大小，所以我不明白这里的逻辑。

它溢出了包装器。其中有溢出作为隐藏。

类似示例：https://startbootstrap.com/snippets/video-header/（不完全相同，但此处用于视频背景的 HTML5 视频元素）

【讨论】：