保持HTML5背景 - 视频全屏（在手机上）

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 Framework Bulma和/或Buefy，则需要修改3个元素才能调整嵌入的视频。将您的main.css文件更改为：

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