我的视频尺寸是 1280∆×∆720。
我想知道是否可以拉伸(stretch)视频以使其适合我的浏览器或其他浏览器的大小,具体取决于纵横比。
我正在使用视频标签在我的页面背景上放置一个视频。我目前在后台播放视频,但我不知道如何适本地调整它的大小。
我会提供一个 jsfiddle,但我不确定如何上传我的本地视频来测试重现这种情况
最佳答案
希望这就是您要找的...
CSS
#video-bg {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}
#video-bg > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) {
#video-bg > video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
#video-bg > video { width: 300%; left: -100%; }
}
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
#video-bg > video {
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
}
HTML
<div id="video-bg">
<video controls loop>
<source type="video/mp4" src="video.mp4">
<source type="video/webm" src="video.webm">
</video>
</div>
关于css - 将视频调整为浏览器窗口背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32931204/