调整大小以适合浏览器的背景视频
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了调整大小以适合浏览器的背景视频相关的知识，希望对你有一定的参考价值。
我正在尝试创建一个背景为视频的网站。我一直在寻找如何重新创建像Spotify's主页背景的东西，但似乎无法使其工作。
我的问题是，我可以通过浏览器或宽度获得高度，但不能同时获得两者。与Spotify网站上的视频不同，它无法随时扩展以适应浏览器。我尝试了很多东西，其中大部分我都记不起来了。我不介意使用JQuery来实现这种效果。
我目前的代码是：
<!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>
答案
您将需要一个适合屏幕的容器div，然后在视频中添加一个类，将其调整为宽度或高度。
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：
<div class="container"><video class="videoPlayer">Code goes here</video></div>
另一答案
Oldie但是一个goldie。一直在努力解决这个问题，但发现纵横比媒体查询可以很好地完成工作。
如果不支持媒体查询，视频仍将覆盖页面，但无法正确缩放。
如果不支持translateX，translateY或@supports，视频将不会居中。
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：
.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;
}
}
另一答案
在容器中使用object-fit: cover
另一答案
我找到了这个：
http://wesbos.com/css-object-fit/
使用对象：封面;在您的视频标签上
它对我有用。
以上是关于调整大小以适合浏览器的背景视频的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery 按比例调整 iframe 的大小以适合 DIV
使用 jQuery 按比例调整 iframe 的大小以适合 DIV