调整视频大小是浏览器窗口背景

The dimensions of my video are 1280 × 720.

我的视频尺寸为1280×720。

I was wondering if it is possible to stretch the video so that it will fit into the size of my browser or other browsers depending on an aspect ratio.

我想知道是否可以拉伸视频以使其符合浏览器或其他浏览器的大小，具体取决于宽高比。

I am using the video tag to place a video on the background of my page. I currently have the video playing in the background but I do not know how to size it appropriately.

我正在使用视频标记在我的页面背景上放置视频。我目前在后台播放视频，但我不知道如何适当调整大小。

I would provide a jsfiddle but I'm not sure how to upload my local video to test recreate this situation

我会提供一个jsfiddle，但我不知道如何上传我的本地视频来测试重新创建这种情况

1 个解决方案

#1

I hope this is what you are looking for...

我希望这就是你要找的......

CSS

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

HTML

<div id="video-bg">
    <video controls loop>
    <source type="video/mp4" src="video.mp4">
    <source type="video/webm" src="video.webm">
    </video>
</div>

jsfiddle demo

jsfiddle演示

#1