我想让我的网站播放占据整个视口(viewport)的视频。不是 100% 的 body ，只是视口(viewport)。因此您可以向下滚动并查看其他内容。类似于 mediaboom.com 的做法。
我已经设法让视频占据整个视口(viewport)(不再多)，这正是我的目标。但它没有反应。这意味着在调整窗口大小时视频应保持居中。但是它被切断了。
到目前为止，这是我对 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%;
}
最佳答案
您可以在 CSS 中使用 object-fit: cover，唯一的问题是没有 IE 支持。它实际上与 background-size: cover 相同! https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
关于javascript - 如何让视频占据视口(viewport)的高度和宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38210668/