时间戳

首页 > 解决方案 > 保持 HTML5 背景视频全屏（在移动设备上）

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

问题描述

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

.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 也可以。

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

标签： javascripthtmlcsshtml5-videowidth

解决方案

试试这个

.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%)
 }

推荐阅读