Адаптивное видео с iframe (YouTube и Vimeo)

Как адаптировать видео с YouTube

Задача: вставить видео с YouTube на адаптивный сайт. Сайт меняет ширину на разных разрешениях экрана и нельзя задать размеры iframe с видео. Нужно сделать видео нормальных пропорций на всю ширину сайта.

Решение

Для iframe нужно указать высоту, иначе браузеры выставляют для iframe высоту 150px. Видео загрузится узкой горизонтальной полосой и проиграется в поле размером в половину спичечного коробка. Почти все браузеры отображают iframe, canvas, embed и object с шириной 300px и высотой 150px по высоте, если не указать размеры.

  1. Хороший хостинг для сайта
  2. Прощай, Lorem Ipsum!

Рекомендуем поместить iframe в блок div с заданными пропорциями. А видео абсолютно позиционировать в этом div. Видео в iframe будет увеличиваться и уменьшаться вслед за родительским div и сохранять нормальные пропорции.

HTML:

<div class="video">

</div>

CSS:

.video {position:relative;padding-bottom:56.25%;//padding-top:25px;height:0;}

.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}

ОСТАВЬТЕ КОММЕНТАРИЙ

Д е й с т в у й !
Оставьте ваши контакты и мы ответим в течение 10 минут.
Ваша заявка принята!

Рассылка Reconcept, подпишитесь на наш полезный блог

Ваша заявка принята!