100％寬度和固定高度的背景視頻

Question

我需要在後臺運行視頻。要求是視頻必須以100％寬度和600px高度/最大高度運行。這是我想要做的。

https://jsfiddle.net/yydkd5t4/1/

HTML

<video autoplay loop muted id="video-bg"> 

<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"> 

</video> 

CSS

#video-bg { 
position: fixed; 
right: 0; 
bottom: 0; 
width: auto; 
min-width: 100%; 
height: auto; 
min-height: 100%; 
z-index: -100; 
background: transparent url(video-bg.jpg) no-repeat; 
background-size: cover; 
} 
video {display: block;} 

我面臨什麼樣的問題是，當我嘗試解決這個高度也縮減寬度。任何解決我的問題將高度讚賞。

Answer 1

瞭解你想要達到的後...

您需要將父母div添加到視頻。否則它會保持縱橫比，你不能達到你想要的。

#video-bg { 
 
    position: relative; 
 
    width: auto; 
 
    min-width: 100%; 
 
    height: auto; 
 
    background: transparent url(video-bg.jpg) no-repeat; 
 
    background-size: cover; 
 
} 
 
video { 
 
    display: block; 
 
} 
 
.video-container { 
 
    width: 100%; 
 
    max-height: 600px; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    z-index: -100; 
 
}

<!--[if lt IE 9]> 
 
<script> 
 
document.createElement('video'); 
 
</script> 
 
<![endif]--> 
 
<div class="video-container"> 
 
    <video autoplay loop muted id="video-bg"> 
 

 
    <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4" /> 
 

 
    </video> 
 
</div>

與您現有的代碼或至今任何答案的問題是，它不會維持height: 600px因爲視頻將始終保持他的縱橫比。

因此，您添加了一個父母div與width: 100%和一個max-height:600px與overflow:hidden。這樣，如果視頻獲得更高的高度，則會被父母div隱藏。

這可能是實現您想要的最好方法，但請記住它會隱藏視頻的某些部分。

Answer 2

這裏是jsfiddle

更新的代碼請注意，我改變了min-height: 100%;到min-height: 600px;並添加top: 0;

#video-bg { 
position: fixed; 
top: 0; 
right: 0; 
width: auto; 
min-width: 100%; 
height: auto; 
min-height: 600px; 
z-index: -100; 
background: transparent url(video-bg.jpg) no-repeat; 
background-size: cover; 
} 
video {display: block;}