javascript - 如何使视频背景响应？

Question

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

我可以使用哪些媒体查询来使此视频背景更具响应性？

它不必在移动设备上完美，但还算不错。

.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;
  }
}

<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>

Answer 1

试试这个

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