ビデオの背景を反応させるには？

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;