保持 HTML5 背景视频全屏（在移动设备上）

Question

问题： 当我调整浏览器大小时 window，我已经很好对齐的视频将在保持宽高比的同时继续填充屏幕，只要window 大于高度。当 window 的高度开始大于宽度时，视频的顶部和底部会出现空白。
我的代码： 我目前正在使用以下 CSS 代码用于以下 HTML 代码：

.bgvideodiv {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    -webkit-filter: blur(5px) brightness(50%);
    -moz-filter: blur(5px) brightness(50%);
    -o-filter: blur(5px) brightness(50%);
    -ms-filter: blur(5px) brightness(50%);
    filter: blur(5px) brightness(50%);
    overflow: hidden !important;
  }
  .bgvideo {
    height: 100%;
    min-width: 100%;
    width: auto;
    /* Same: object-fit: fill; */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .scaler {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    overflow: hidden;
    transform: scale(1.2);
  }

<div class="scaler">
    <div class="bgvideodiv">
      <video playsinline="" autoplay="" muted="" preload="auto" poster="" loop="" class="bgvideo">
        <source src="hero.mp4" type="video/mp4"></source>
        <source src="hero.webm" type="video/webm"></source>
      </video>
    </div>
  </div>

（您必须添加自己的视频 mp4 和 webm 才能使此代码段生效）
我更喜欢纯 CSS 解决方案，但 JS / jQuery 也很好。

我已经找到了解决方案；见下文。

Answer 1

试试这个

.bgvideo {
   width: 100%;
   height: auto;
   /* Same: object-fit: fill; */
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%)
 }

Answer 2

希望这可能有所帮助:)

.bgvideodiv {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}

.bgvideodiv video {
  min-width: 100%; 
  min-height: 100%; 
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


<div class="bgvideodiv">
  <video playsinline="" autoplay="" muted="" preload="auto" poster="" loop="" class="bgvideo">
    <source src="hero.mp4" type="video/mp4">
    <source src="hero.webm" type="video/webm">
  </video>
</div>

Answer 3

事实证明，我使用的 CSS 框架 bulma 会自动将 max-width: 100%; 规则应用于所有视频、img、对象、嵌入和 iframe 对象（无缘无故，因为它似乎）。我用以下代码片段禁用了规则，将其插入 bulma 嵌入下方的任何位置：

embed, iframe, img, object, video {
   max-width: none;
}

任何应覆盖该值的最大宽度规则都必须置于该值之下。
现在一切正常，感谢您的任何建议。

Answer 4

如果您使用的是 CSS 框架 Bulma and/or Buefy，您需要修改 3 个元素以调整嵌入的视频。将您的 main.css 文件更改为：

embed,
iframe,
video {
    height: 400px; /* adjust pixels if needed */
    max-width: 100%;
}

Answer 5

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

保持 HTML5 背景视频全屏（在移动设备上）

Keep HTML5 Background-Video fullscreen (on mobile)

html

javascript

css

width

html5-video