Возникли проблемы с адаптацией встроенной YouTube, но не такой большой на моем рабочем столе

Question

Я стараюсь, чтобы мое отзывчивое встроенное видео на YouTube не выглядело таким большим на обычном настольном дисплее. На мобильных устройствах он выглядит хорошо, но при попытке изменить размер, чтобы он выглядел хорошо на рабочем столе, он портит отзывчивость на мобильном телефоне.

Я пытался настроить ширину / высоту% в css, что позволяет мне изменять размер на рабочем столе, но разрушает отзывчивость в мобильном телефоне.

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

<div class="video-container">
<iframe width="853" height="480" src="https://www.youtube.com/embed/z9Ul9ccDOqE" frameborder="0" allowfullscreen>
</iframe>
</div>

Я пытаюсь получить мойвстроенное видео, чтобы оно выглядело как обычное видео, но все же отзывчивоВ настоящее время он занимает весь экран.

вот фотография экрана рабочего стола.

Answer 1

Используйте свойство CSS max-width, чтобы установить жесткое ограничение для области, в которой вы хотите остановить расширение видео. Таким образом, если пользователь использует что-то вроде сверхширокого монитора, ваш контент будет ограничен, где вы хотите.

Вот пример:

.expandable{
    width: 80%
    max-width: 1200px;
}