全屏<video>：這是什麼樣的CSS魔術？

這example演示如何創建一個全屏HTML5視頻。它使用以下CSS代碼：全屏<video>：這是什麼樣的CSS魔術？

video#bgvid { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(polina.jpg) no-repeat; 
    background-size: cover; 
}

我想知道這些屬性背後的含義是什麼。我明白爲什麼一個人使用fixed職位和z-index將其放在後面。我不明白的是：

爲什麼{ width: 100%; height: 100% }不能正常工作，但的{ width: auto; min-width: 100%; height: auto; min-height: 100% }組合一樣。
爲什麼先設置top和left至50％，然後用transform小號translate回來？
如何適應這是視口不是100％，但父元素（例如<section>）的100％？

來源

2015-10-28 wh1t3cat1k

第二點是通常用於元素的水平和垂直居中的技巧。例如，設置'left：50％'將元素的左邊緣放置在中心位置，然後'translateX（-50％）'將左邊緣向左移動該元素寬度的一半。第一點應該基本上是允許元素在需要時延伸超過100％。 – Harry

哈利，非常感謝！你應該添加這個答案，而不是作爲評論 - 我會接受它！ – wh1t3cat1k

我沒有把它作爲答案加入，因爲我沒有回答你的所有問題，也不確定是否需要點1中的設置（儘管我能理解它在做什麼）。阿爾瓦羅的回答涵蓋了它:) – Harry

爲什麼{ width: 100%; height: 100% }不能正常工作，但的{ width: auto; min-width: 100%; height: auto; min-height: 100% }組合一樣。

這可能是比較容易，如果你考慮到HTML5視頻作爲兩個部分的東西來解釋：一方面，你有容器（在<video>），並在另一方面，你有影片（在<source>指定或src）。

當您設置一個width和height，你正在做的是建立width和容器的height，而不是電影本身。電影將會保持其縱橫比，直到它達到容器寬度或高度的100％爲止。

考慮到這一點，讓我們來分別看看這兩種情況下：

當您設置width和height至100％，你的容器設置爲特定值：佔據屏幕的全尺寸。然後，電影將按照上面所述將容器大小調整爲容器的大小，這就是導致頂部/底部（或垂直視頻的左/右）「黑條」的原因。

在這種情況下，「這部電影將適應容器大小」。解決這個問題

一種可能性，將是編程告訴電影使用CSS規則，以適應集裝箱：object-fit:cover。這與background-size:cover適用於圖像的方式類似，但它可能不是object-fit is not fully supported的最佳選項。
當您設置width和height到auto和min-width和min-height至100％，你只是給人一種指導到容器：它必須有屏幕的至少高度和寬度（但它可能有更多的）。電影將能夠與其縱橫比成比例地增長，而不包含任何限制，因此其尺寸將會溢出窗口之一。

在這種情況下，「容器會適應影片大小」。

此圖片代表我嘗試上述解釋的情況下會發生什麼，我希望它能幫助：

爲什麼先設置top和left至50％，然後translate回使用transforms？

這是將視頻集中在屏幕中的技巧。通常在電影中，行動將發生在中心周圍而不是在角落;所以你希望有儘可能多的中心可見。

如果你只是把100％與top視頻和left值設置爲0，並且width和height（或min-width和min-height），則視頻將被連接到左上角，你可能會錯過什麼在右側和底側。

通過將視頻設置在屏幕中央並使用transform進行翻譯，您可以確保視頻的中心位於屏幕的中心，並且邊框是被忽略的視線。

如何適應這是視口不是100％，但父元素的100％（例如，<section>）？

這可以通過該部分到relative位置，並且視頻設置爲（而不是fixed）的absolute位置來實現。這樣視頻就會適應其父，而不是窗口。

在您鏈接的教程頁面中，類似的問題是asked as a comment by EM。同一個用戶發佈了他/她自己的解決方案（通過調整所述的相對/絕對定位）並在該codepen中共享代碼：http://codepen.io/emmajean/pen/nyhFL。

來源

2015-10-28 18:14:41

阿爾瓦羅，輝煌的答案。謝謝你的時間。 – wh1t3cat1k

全屏<video>：這是什麼樣的CSS魔術？

回答

相關問題