Html 具有 100% 宽度和固定高度的背景视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29817002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background video with 100% width and fixed height
提问by Sami
I need to run a video in the background. Requirements are that the video will have to run on 100% width and 600px height/max-height. Here is what i tried to do.
我需要在后台运行视频。要求是视频必须以 100% 的宽度和 600 像素的高度/最大高度运行。这是我尝试做的。
https://jsfiddle.net/yydkd5t4/1/
https://jsfiddle.net/yydkd5t4/1/
HTML
HTML
<video autoplay loop muted id="video-bg">
<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>
CSS
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;}
The issue what i am facing is that when i try to fix the height it also scale down the width. Any solution to my problem will highly be appreciated.
我面临的问题是，当我尝试修复高度时，它也会缩小宽度。对我的问题的任何解决方案将不胜感激。
回答by Joel Almeida
After understanding what you are trying to achieve...
在了解您要实现的目标后...
You need to add a parent divto the video. Else it will maintain the aspect-ratio and you can't achieve what you want.
您需要将父级添加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>The problem with your current code or any answers till now is that it won't maintain the height: 600pxbecause the video will always maintain his aspect-ratio.
到目前为止，您当前代码或任何答案的问题是它不会保持 ，height: 600px因为视频将始终保持他的纵横比。
So, you add a parent divwith width: 100%and a max-height:600pxwith overflow:hidden. This way if the video gets a bigger height it will be hidden by the parent div.
因此，您添加了一个divwithwidth: 100%和一个max-height:600pxwith overflow:hidden。这样，如果视频获得更大的高度，它将被父级隐藏div。
This is probably the best way to achieve what you want, but keep in mind it will hide some parts of the video.
这可能是实现您想要的最佳方式，但请记住，它会隐藏视频的某些部分。
回答by odedta
Here is your updated code at jsfiddle
这是您在jsfiddle更新的代码
Please note that I changed min-height: 100%;to min-height: 600px;and added top: 0;
请注意，我改变了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;}
