регулировка размера видео и его отзывчивость

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

смотрит, что я положил фона: прозрачный и поставить маржу: авто, чтобы держать его в центре.