Question

问题：当我调整浏览器窗口的大小时，只要窗口的宽度大于高度，我已经对齐好的视频将在保持宽高比的同时继续填充屏幕。当窗口的高度开始变得大于宽度时，视频的顶部和底部将出现空白。
我的代码：我目前正在将以下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和/或Buefy，则需要修改3个元素才能调整嵌入式视频。将您的main.css文件更改为：

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

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

4 个答案: