如何让视频占据视口的高度和宽度？

Question

我想让我的网站播放占据完整视口的视频。 不是 100% 的身体，只是视口。 因此，您可以向下滚动并查看其他内容。 类似于 mediaboom.com 的做法。

我已经设法让视频占据了完整的视口（并且没有更多），这就是我的目标。 但它没有响应。 这意味着在调整窗口大小时视频应保持居中。 但它会被切断。

到目前为止，这是我对 html 的了解：

<div id="featured">
        <video poster="assets/poster.jpg" autoplay="true" muted="true" loop>
            <source src="assets/home.mp4" type="video/mp4" />
        </video>
</div>

和CSS：

body, html {
margin: 0px;
padding: 0px;
}

#featured {

max-height: 100vh;
overflow: hidden;
text-align: center;
}


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

}

Answer 1

你可以在你的 CSS 中使用 object-fit:cover，唯一的问题是没有 IE 支持。 不过，它实际上与 background-size: cover 相同！ https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Answer 2

与object-fit: contain/cover ，这个也适用于 IE/Edge

正如评论中提到的，要模仿contain使用max-width/max-height代替。 另请注意，示例视频需要几秒钟才能加载

模仿object-fit: cover示例object-fit: cover

 html, body { margin: 0; } #wrapper{ position: relative; height: 100vh; overflow: hidden; } #featured { position: absolute; width: calc(100vh * (1000 / 562)); /* video width / height */ height: calc(100vw * (562 / 1000)); /* video height / width */ min-width: 100%; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

 <div id="wrapper"> <div id="featured"> <video poster="assets/poster.jpg" autoplay="true" muted="true" loop> <source src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" /> </video> </div> </div>

使用object-fit示例

 html, body { margin: 0; } #featured { position: relative; height: 100vh; overflow: hidden; } video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* or contain */ }

 <div id="featured"> <video poster="assets/poster.jpg" autoplay="true" muted="true" loop> <source src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" /> </video> </div>

Answer 3

我不确定我是否正确回答了您的问题，但我尝试了您的代码更改 min-width:100%; 和最小高度：100%； 对于宽度：100%； 和高度：100%； 并且窗口正确调整大小。

编辑：

我很抱歉，但我不知道在哪里可以查看 mediaboom.com 那里有很多东西。

但如果你想：

• 保持视频的纵横比。
• 让视频与视口允许的高度一样高。
• 如有必要，裁剪视频的宽度，但保持视频居中
• 在您可以通过滚动到达的视频 div 下添加更多元素

然后试试这个。 如果它不是解决方案，它可能会让你更接近：

body, html {
            margin: 0px;
            padding: 0px;
            width: 100%;
        }

        #featured {
            width: 100wh;
            height: 100vh;
            position: relative;
        }


        video {
            width:100wh;
            height: 100Vh;
            display:inline-block;
            position: absolute;
            top:50%;
            left:50%;
            margin-right: -50%;
            transform: translate(-50%,-50%);
        }