我正在尝试创建一个以视频为背景的网站。几天来我一直在寻找如何重新创建类似 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>
关于html - 调整大小以始终适合浏览器的背景视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16687382/