調整視頻大小並保持其響應

Question

我試圖使一個嵌入的Vimeo視頻在網頁上看起來更小。目前它響應迅速，並希望保持響應。它現在在網上看起來太大了（對手機大小感到滿意），但它如何使它更小？

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

這裏是鏈接到我的網頁預先 https://bkwon0402.github.io/item/uxvideo.html

謝謝！

Answer 1

你可以改變從width和height：

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

並將其設置爲90％爲例。

Answer 2

類似的東西應該工作：

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

看起來，我已經把背景：透明，並把保證金：汽車，以保持它爲中心。