視頻標籤佔用了全部瀏覽器空間

我試圖讓我的視頻佔用整個瀏覽器大小，當我進入該頁面時。但是我看到了一點下一<div>視頻標籤佔用了全部瀏覽器空間

下面是頁面的HTML：

下面是video-containter的CSS：

.video-container { 
    position: relative; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    background: no-repeat; 
    background-size: cover; 
}

<section>與class="index"不包含任何內容：

.index { 

}

來源

2015-11-13 Liondancer

請發表您的完整代碼或提供演示。 – Alex

也許這可以幫助你：http://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements – h0ch5tr4355

使用VH和VW爲@ theStreets93建議，但我覺得我得到更好的結果時，它適用於身體和html，然後將子元素（如.video-container）設置爲100％。通過將top, bottom, left,和right設置爲0，使主體和html relative和.video-container和.video-containerabsolute可以完全控制，但它可能會拉伸和扭曲視頻，以便相應地進行調整。 margin, padding,和border以及box-sizing: border-box/inherit的重置應該抵消UA的默認值，例如刺激性8px margin添加到身體。

我注意到在你的HTML中.video-container不是孩子的身體，你也有幾個孩子的身體。如果可能的話，我建議你修剪一些多餘的元素，並將你需要的元素設置爲高度或行高爲0。如果你的能夠，你可能不得不打開.video-container。當然，如果剩餘的元素是靜態的（即默認爲position: static），則可能不需要去除所有這些。由於您沒有提供適當的演示，因此很難說。：\

html, body { 
    box-sizing: border-box; 
    font: 400 16px/1.45 'Source Code Pro'; 
    position: relative; 
    width: 100vw; 
    height: 100vh; 
} 
*, *:before, *:after { 
    box-sizing: inherit; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

.video-container { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: -100; 
    background: no-repeat; 
    background-size: cover; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
}

來源

2015-11-13 14:11:49 zer00ne

我現在有我的CSS設置爲：http://dpaste.com/2AW34XW這填滿了瀏覽器頁面，但我拖動瀏覽器。我注意到文字開始重疊視頻。 http://postimg.org/image/6ktgk93kx/ – Liondancer

我設法創建了一個jsfiddle !: https://jsfiddle.net/reactjs/69z2wepo/如果你拖動窗口。您可以看到文字與視頻重疊 – Liondancer

http://i.imgur.com/HXRfrTr.png – zer00ne

你與大衆和VH試試？

.video-container { 
    width: 100vw; 
    height: 100vh; 
    object-fit: cover; 
    position: relative; 
    background: no-repeat; 
    background-size: cover; 
}

VH（視高度）
VW（視寬）

來源

2015-11-13 09:14:47

視頻標籤佔用了全部瀏覽器空間

回答

相關問題