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;}