Question

我想在网站上使用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;
}

Answer 1

这是一个非常古老的主题，我知道，我提议的并不一定是您正在寻找的解决方案，但是对于因搜索我搜索的内容而来到这里的所有人：缩放视频以填充视频容器元素，保持比例不变

如果您希望视频填充<video>元素的大小，但视频已正确缩放以填充容器，同时保持宽高比，您可以使用object-fit使用CSS执行此操作。与背景图像的background-size非常相似，您可以使用以下内容：

video {
    width: 230px;
    height: 300px;
    object-fit: cover;
}

我希望这对某些人有帮助。

编辑：works in most browsers but IE

Answer 2

你可以使用：

min-width: 100%;
min-height: 100%;

http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

Answer 3

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

[...]以与img元素相同的方式 - 如果您只设置宽度和高度之一，则会自动调整另一个尺寸以使视频保持其宽高比。但是 - 与img元素不同 - 如果您将宽度和高度设置为与视频宽高比不匹配的内容，则视频不会拉伸以填充框。相反，视频会保留正确的宽高比，并在视频元素内是letterboxed。 在保留宽高比的同时，视频将在视频元素内尽可能大地呈现。

Answer 4

我通过比较元素与源视频的比率然后应用CSS变换来解决这个问题：https://gist.github.com/1219207

Answer 5

昨天选了这个，并一直在争取答案。这有点类似于Jim Jeffers的建议，但它适用于x和y缩放，是javascript语法，只依赖于jQuery。它似乎工作得很好：

function scaleToFill(videoTag) {
    var $video = $(videoTag),
        videoRatio = videoTag.videoWidth / videoTag.videoHeight,
        tagRatio = $video.width() / $video.height();
    if (videoRatio < tagRatio) {
        $video.css('-webkit-transform','scaleX(' + tagRatio / videoRatio  + ')')
    } else if (tagRatio < videoRatio) {
        $video.css('-webkit-transform','scaleY(' + videoRatio / tagRatio  + ')')
    }
}

如果你正在使用原生控件，你会遇到一些问题，正如你在这个小提琴中看到的那样：http://jsfiddle.net/MxxAv/

由于我当前项目中的所有抽象层，我有一些不寻常的要求。因为我在示例中使用了一个包装器div，并在包装器内将视频缩放到100％，以防止在我遇到的一些极端情况下出现问题。

Answer 6

我用它来填充宽度或高度...（需要jQuery）这个KEEPS的宽高比和填充div。我知道问题是打破方面的比例，但没有必要。

var fillVideo = function(vid){
    var video = $(vid);
    var actualRatio = vid.videoWidth/vid.videoHeight;
    var targetRatio = video.width()/video.height();
    var adjustmentRatio = targetRatio/actualRatio;
    var scale = actualRatio < targetRatio ? targetRatio / actualRatio : actualRatio / targetRatio;
    video.css('-webkit-transform','scale(' + scale  + ')');
};

只要<video>的宽度和高度设置为100%且您的容器div有css overflow:hidden，只需将视频标记传递给它。

var vid = document.getElementsByTagName("video")[0];
fillVideo(vid);

Answer 7

正确的CSS选项是object-fit: contain;

以下示例将在屏幕宽度上拉伸背景图像（同时打开纵横比），并保持固定的固定高度。

body {
    background-image:url(/path/to/background.png)
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 346px;
    object-fit: contain;
}

对于OP的上下文中的视频，它将是：

video#vidtest {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

Answer 8

经过一番挣扎，这就是我最终的结果。它会在适当的时刻自动缩放视频。

var videoTag = $('video').get(0);
videoTag.addEventListener("loadedmetadata", function(event) {
   videoRatio = videoTag.videoWidth / videoTag.videoHeight;
   targetRatio = $(videoTag).width() / $(videoTag).height();
    if (videoRatio < targetRatio) {
      $(videoTag).css("transform", "scaleX(" + (targetRatio / videoRatio) + ")");
    } else if (targetRatio < videoRatio) {
      $(videoTag).css("transform", "scaleY(" + (videoRatio / targetRatio) + ")");
    } else {
      $(videoTag).css("transform", "");
    }
});

只需将该代码放入$(document).ready()块。

在Chrome 53，Firefox 49，Safari 9，IE 11上进行了测试（IE确实可以正确缩放视频，但可能会做其他有趣的事情）。

Answer 9

如果 object-fit 属性不适合您（WebView、Android 等），您可以自己计算视频的高度。

例如，对于视频 16:9，高度为 calc(100vw * 9 / 16)

你如何使用它？

.video-wrapper {
    width: 100%;
    height: calc(100vw * 9 / 16);
    position: relative;
}

video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

缩放HTML5视频和中断宽高比以填充整个站点

9 个答案: