自適應全屏HTML5視頻問題

Question

我正在嘗試實現全屏html5視頻啟動/着陸頁，它在桌面瀏覽器上效果很好，但在視頻下方留下了黑條/空格。

問題是，在較小的屏幕或移動設備上測試播放時，它會破壞響應能力並且無法顯示海報圖像。 我確定這是一個相當簡單的修復，但是，這是第一次使用HTML5 Video。

使用以下CSS：

video {
position: absolute;
z-index: 0;
width: 100%;
height: auto;
}

以及以下HTML：

<video autoplay="" loop="" muted="" poster="img/poster.jpg">
        <source src="video/energycrisis.mp4" type="video/mp4">
        <source src="video/energycrisis.webm" type="video/webm">
        <source src="video/energycrisis.ogg" type="video/ogg">
</video>

我嘗試將CS​​S更改為：

video {
position: absolute;
z-index: 0;
min-width: 100%;
min-height: 100%;
overflow: hidden;
}

該CSS完全用視頻覆蓋了視口，這是理想的結果，但是同樣，它在桌面和響應式屏幕上都會溢出，進而破壞了響應式布局。

任何幫助將不勝感激。

Answer 1

感謝@sdcr提供的信息，不幸的是，它沒有解決問題，您的CSS正在為我提供類似的結果。

但是，我發現了一個非常簡單的修復方法！ 通常，我已經花了幾個小時，而今天回到家時，我會在5分鍾內用一杯茶修復它。

到目前為止，最簡單的方法是使用由少量jQuery代碼組成的插件。

http://vodkabears.github.io/vide/

無論如何，感謝您的幫助，我希望這對其他人有用。