我想使用 4:3 视频作为网站的背景。但是，将宽度和高度设置为 100% 不起作用，因为宽高比保持不变，因此视频不会填充网站的整个宽度。
这是我的 HTML 和 CSS 代码。
HTML:
<!DOCTYPE HTML>
<html land="en">
<head>
<link rel="stylesheet" type="text/css" href="html5video.css" />
<title>html 5 video test</title>
</head>
<body id="index">
<video id="vidtest" autoplay>
<source src="data/comp.ogv" type="video/ogg" width="auto" >
</video>
<div class="cv">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>
CSS:
body
{
background-color:#000000;
}
#vidtest {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 200%;
height: 100%;
z-index: -1000;
}
.cv
{
width: 800px;
position:relative;
text-align:center;
margin-top: 100px;
color:#FFFFFF;
font-family:"Arial";
font-size: 10px;
line-height: 2em;
text-shadow: 3px 3px 2px #383838;
margin-left: auto;
margin-right: auto;
}
我知道，这是一个非常古老的线程，我提出的不一定是您正在寻找的解决方案，但对于所有因为搜索我搜索的内容而登陆这里的人：缩放视频以填充视频容器元素，保持比例不变
如果你想让视频充满<video>元素，但视频会正确缩放以填充容器，同时保持纵横比不变，您可以使用 CSS 来做到这一点object-fit。很像background-size对于背景图像，您可以使用以下内容：
video {
width: 230px;
height: 300px;
object-fit: cover;
}
我希望这对一些人有帮助。
EDIT: 适用于大多数浏览器，但 IE 除外 http://caniuse.com/#feat=object-fit
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
