如何創建自適應視頻（HTML5）背景？

Question

我遇到了這個網站： https : //hinge.co/，並嘗試遵循HTML / CSS來了解它們如何具有流暢，響應迅速的HTML5視頻背景。

我遇到了一些我不理解的屬性，例如：

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

我了解這是他們使用的JS插件，而calc中的值是動態的。 但是為什么vh高度會超過100？ 那會不會比視口本身大？ 該視頻似乎是正確的視口大小，因此我不明白這里的邏輯。

以前有人創建過這樣的東西，可以幫助您了解如何完成嗎？

Answer 1

我已經檢查了代碼，並且這兩行特別的工作只是限制了視頻的縮放比例。

訣竅是什么

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

無論影片大小/形狀（垂直或水平），都能確保影片覆蓋整個屏幕甚至更多。

Answer 2

我遇到了這個網站： https : //hinge.co/，並嘗試遵循HTML / CSS來了解它們如何具有流暢，響應迅速的HTML5視頻背景。

他們沒有使用HTML5視頻元素。 他們嵌入了Vimeo的視頻，然后使用CSS定位了視頻。

我了解這是他們使用的JS插件，而calc中的值是動態的。 但是為什么vh高度會超過100？

他們可能這樣做是為了在任何屏幕尺寸下都能保持視頻的長寬比正確。

那會不會比視口本身大？ 該視頻似乎是正確的視口大小，因此我不明白這里的邏輯。

它使包裝程序溢出。 其中有溢出作為隱藏。

相似示例： https : //startbootstrap.com/snippets/video-header/ （不完全相同，但此處將HTML5視頻元素用作視頻背景）