【问题标题】:Sizing video to be browser window background将视频大小调整为浏览器窗口背景
【发布时间】:2015-10-04 07:45:43
【问题描述】:

我的视频尺寸是1280 × 720。

我想知道是否可以拉伸视频,使其适合我的浏览器或其他浏览器的大小,具体取决于纵横比。

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

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

【问题讨论】:

  • 如果可以,创建一个 JSFiddle 或发布您用于视频和部分的代码
  • @XahedKamal 我不确定如何将我的视频文件上传到 jsfiddle。尝试寻找替代方案,但找不到替代方案。

标签: css html video


【解决方案1】:

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

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>

jsfiddle demo

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-04-20
    • 2013-05-17
    • 2012-03-23
    • 2023-04-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多