Question

我的背景视频在全尺寸笔记本电脑/台式机显示屏上正确显示，但当我开始最小化时，它变得笨重，视频在移动显示屏上放大了建筑物并且其高度太长。

我可以使用哪些媒体查询来提高视频背景的响应速度？

它不一定要在移动设备上完美，但有点体面。

＆＃13;

.fullscreen-bg {
  position: relative;
  top: 50%;
  right: 50%;
  bottom: 0px;
  left: 0px;
  overflow: hidden;
  z-index: -1px;
}

.fullscreen-bg__video {
  position: relative;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  background-size: cover;
  transition: 1s opacity;
  display: inline-block;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

@media (max-width: 767px) {
  .fullscreen-bg {
    background: url('../img/videoframe.jpg') center center / cover no-repeat;
  }
  .fullscreen-bg__video {
    display: none;
  }
}

＆＃13;

<section>
  <div class="fullscreen-bg">
    <video loop muted autoplay poster="img/index-11.jpg" class="fullscreen-bg__video">
        <source src="video/BnW.webm" type="video/webm">
        <source src="video/BnW.mp4" type="video/mp4">
    </video>
    <div class="container container-wide slider-container">
      <div class="jumbotron text-center bg-btn">
        <h1 data-wow-duration="2s" class="wow fadeIn">Beautiful.<br>Views.<small data-wow-duration="2s" class="wow fadeIn">City of Chicago</small></h1>
        <p data-wow-duration="2s" class="big wow fadeIn"></p>
      </div>
    </div>
  </div>
</section>

＆＃13;

Answer 1

试试这个

position: relative;
right: 0;
bottom: 0;
max-width: 100%;
min-height: 100%;
width: auto;
height: auto;

如何使视频背景响应？

1 个答案: