缩放HTML5视频和突破纵横比，以填满整个网站 [英] scale HTML5 Video and break aspect ratio to fill whole site
问题描述
我想使用4：3视频作为网站的背景，但将宽度和高度设置为100％
不工作，因为宽高比保持不变，所以视频不填满整个
感谢您的帮助！
这里是我的html和css代码
html：
<！DOCTYPE HTML>
< html land =en>
< head>
< link rel =stylesheettype =text / csshref =html5video.css/>
< title> html 5视频测试< / title>
< / head>
< body id =index>
< video id =vidtestautoplay>
< source src =data / comp.ogvtype =video / oggwidth =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。在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。在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：
code> 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;
}
我希望这对某些人有帮助。
编辑：尚未在所有浏览器中。
I want to use a 4:3 video as a background on a site, but setting the width and height to 100% doesnt work, since the aspect ratio is kept intact, so the video doesnt fill the whole width of the site.
thanks for your help!
here is my html and css code
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;
}
this a really old thread, I know, and what I'm proposing is not necesserily the solution you are looking for, but for all people that land here because of searching what I searched: scale the video to fill the video container element, keeping ratio intact
If you want the video to fill the size of the <video> element but the video is scaled correctly to fill the container while keeping the aspect ratio in tact you can do this with CSS using object-fit. Much like background-size for background images you can use the following:
video {
width: 230px
height: 300px;
object-fit: cover;
}
I hope this can be of help for some people.
EDIT: not in all browsers yet.
这篇关于缩放HTML5视频和突破纵横比，以填满整个网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
