Html 调整大小以始终适合浏览器的背景视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16687382/
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 that resizes to always fit the browser
提问by Lateral
I'm trying to create a website in which the background is a video. I've been searching for days on how to recreate something like Spotify'shomepage background but cannot seem to make it work.
我正在尝试创建一个以视频为背景的网站。我一直在寻找有关如何重新创建Spotify主页背景之类的内容的时间，但似乎无法使其正常工作。
My problem is that I can either get the height to scale with the browser, or the width, but not both. Unlike the video on Spotify's website, it doesn't scale to fit the browser at all times. I've tried many things, and most of them I can't remember. I don't mind using JQuery to achieve this effect.
我的问题是我可以使用浏览器缩放高度或宽度，但不能同时缩放。与 Spotify 网站上的视频不同，它不会一直缩放以适应浏览器。我尝试了很多东西，其中大部分我都不记得了。我不介意使用 JQuery 来实现这种效果。
My current code is:
我目前的代码是：
<!DOCTYPE html>
<html>
<head>
<title>VideoBG</title>
<style type="text/css">
#videohome {
position:absolute;
height: 100%;
width: 100%;
top:0;
left:0;
right:0;
bottom:0;
}
</style>
</head>
<body>
<video id="videohome" preload="auto" autoplay="true" loop="loop" muted="" volume="0">
<source src="./homepage.mp4" type="video/mp4" />
</video>
</body>
</html>
回答by cutoverRooster
You will need to have a container div, which fits to the screen, and then add a class to the video which will resize it to width or height.
您需要有一个适合屏幕的容器 div，然后向视频添加一个类，将其调整为宽度或高度。
CSS:
CSS：
.container {
width: 100%;
height: 100%;
position: absolute;
padding:0;
margin:0;
left: 0px;
top: 0px;
z-index: -1000;
overflow:hidden;
}
.videoPlayer {
min-height: 100%;
//min-width:100%; - if fit to width
position:absolute;
bottom:0;
left:0;
}
HTML:
HTML：
<div class="container"><video class="videoPlayer">Code goes here</video></div>
回答by Nh?t Nam
Use object-fit: coverin the container
object-fit: cover在容器中使用
回答by shakyjake
Oldie but a goldie. Have been struggling with this myself but found that aspect-ratio media queries do the job nicely.
老歌，但金子。我自己一直在努力解决这个问题，但发现纵横比媒体查询很好地完成了这项工作。
If media queries aren't supported, the video will still cover the page but won't scale properly.
如果不支持媒体查询，视频仍会覆盖页面，但不会正确缩放。
If translateX, translateYor @supportsisn't supported, the video won't be centered.
如果translateX，translateY或@supports不被支持，该视频将不能居中。
HTML:
HTML：
<div class="cover">
<video autoplay loop mute poster="path/to/image.jpg">
<source src="path/to/video.mp4" type="video/mp4" />
<source src="path/to/video.webm" type="video/webm" />
<source src="path/to/video.ogv" type="video/ogg" />
<img src="path/to/image.jpg" alt="" />
</video>
</div>
CSS:
CSS：
.cover {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.cover img, .cover video {
display: block;
height: auto;
left: auto;
max-width: none;
min-height: 100%;
min-width: 100%;
right: auto;
position: absolute;
top: 0;
width: auto;
z-index: 1;
}
@supports (transform: translateX(-50%)) {
.cover img, .cover video {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
@media screen and (min-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */
.cover img, .cover video {
max-width: 100vw;
min-width: 100vw;
width: 100vw;
}
}
@media screen and (max-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */
.cover img, .cover video {
height: 100vh;
max-height: 100vh;
min-height: 100vh;
}
}
回答by Tun? Polat
I found this:
我找到了这个：
http://wesbos.com/css-object-fit/
http://wesbos.com/css-object-fit/
Use object-fit: cover; on your video tag
使用 object-fit：cover；在您的视频标签上
It worked for me.
它对我有用。
