Адаптивный дизайн произвел революцию, где многих стимулировал переход от нативных приложений к веб-приложениям, легко настраиваемым для мобильной среды, чтоб корректно отображалось на любом размере экрана. Это касается и аидео плеера, за основу возьмем плеер от ютуба и сделаем его отзывчивым, чтоб корректно отображался на всех мониторах.
Если ранее мы медиа-запросы и не пиксельные измерения, чтобы упростить адаптивный дизайн, где на самом деле, img {max-width: 100%} это один из моих любимых фрагментов CSS. Элементы IFRAME создают совершенно другую проблему, поскольку они не ограничены размерами.
Чтобы сделать IFRAME отзывчивым, вам нужно обернуть его в div.
HTML
Код
<div class="adaptivny-dizayn-pleyera">
<iframe width="1284" height="510" src="https://www.youtube.com/embed/FNLh9evGIA4"></iframe>
</div>
CSS
Код
.adaptivny-dizayn-pleyera {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.adaptivny-dizayn-pleyera iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Это соотношение соответствует отношению высоты YouTube к ширине, но вы можете использовать любое соотношение, соответствующее соотношению использования IFRAME.
Демонстрация
