javascript - 如何创建响应式视频 (HTML5) 背景？

Question

我发现了这个网站:https://hinge.co/并尝试遵循 HTML/CSS 以了解他们如何拥有流畅、响应迅速的 HTML5 视频背景。

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

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

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

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

Answer 1

我检查了代码，这两行除了限制视频的缩放比异常(exception)，并没有做更多的事情。

有什么诀窍

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

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