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

Всем известно, что в iframe кодах встраивания видео YouTube и Vimeo присутствуют такие параметры, как размеры видеоплеера — ширина и высота. Что же делать, если сайт адаптивный?

Решение есть:

Обрамляем наш iframe дивником:

Стили video-container-а ставим следующие:

Работает это так: видео абсолютно позиционируется относительно заданного родительского блока и занимает всю его площадь (поэтому width и height = 100%). Т.к. видео в основном у нас 16:9, отсюда следует, что padding-bottom мы берём 9/16*100% = 56.25%

 

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *