Wie kann man den Videohintergrund reagieren lassen?

Question

Mein Hintergrundvideo wird auf normal großen Laptops/Desktop-Displays korrekt angezeigt, aber wenn ich anfange zu minimieren, wird es klobig und das Video zoomt auf ein Gebäude und seine Höhe zu lang auf dem mobilen Display.

Mit welchen Medienabfragen kann ich diesen Videohintergrund reaktionsfähiger machen?

Es muss nicht perfekt auf Handy sein, aber etwas anständig.

.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

versuchen, diese

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