Резиновое (адаптивное) видео с YouTube и Vimeo

Всем известно, что в 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%