Всем известно, что в iframe кодах встраивания видео YouTube и Vimeo присутствуют такие параметры, как размеры видеоплеера — ширина и высота. Что же делать, если сайт адаптивный?
Решение есть:
Обрамляем наш iframe дивником:
<div class="video-container"> <iframe width="560" height="315" src="https://www.youtube.com/embed/{ID_ВИДЕО}?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div>
Стили video-container-а ставим следующие:
.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%; }
Работает это так: видео абсолютно позиционируется относительно заданного родительского блока и занимает всю его площадь (поэтому width и height = 100%). Т.к. видео в основном у нас 16:9, отсюда следует, что padding-bottom мы берём 9/16*100% = 56.25%