Anpassen der Videogröße und halten es ansprechend

Question

Ich versuche, ein eingebettetes Vimeo Video auf einer Webseite kleiner zu machen. Derzeit reagiert es und möchte es responsiv halten. Es sieht jetzt zu groß im Web aus (glücklich mit der mobilen Größe) - wie macht es es kleiner?

.video_wrapper { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
} 
 

 
.video_wrapper iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="video_wrapper"> 
 
    <iframe src="https://player.vimeo.com/video/24799548" width="700" height="525" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
</div>

Hier ist der Link zu meiner Seite https://bkwon0402.github.io/item/uxvideo.html

Vielen Dank im Voraus!

Answer 1

können Sie ändern einfach die width und height aus:

.video_wrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

und legen Sie es beispielsweise auf 90%.

Answer 2

So etwas sollte funktionieren:

.video_wrapper iframe { 
    width: 75%; 
    height:75%; 
    margin: auto; 
    padding: 0; 
    background-color: transparent; 
    overflow: hidden; 
} 

sieht, dass ich den Hintergrund gesetzt haben: transparent und setzen Sie den margin: auto es zentriert zu halten.