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


адаптивное видео в iframe на сайт

Задача

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

Решение

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

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

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

HTML:

<div class="video">

        <iframe width="560" height="315" src="https://www.youtube.com/embed/VBOSOREJE68" frameborder="0" allowfullscreen>

</div>

CSS:

.video {position:relative;padding-bottom:56.25%;/*пропорции видео 16:9 */padding-top:25px;height:0;}

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

 



Комментарии (7)

  1. Алексей Вырлан 30 января 2018, 18:24 # 0
    Отлично! Решил проблему адаптивности при вставки контента в текстовом редакторе в админке сайта. Спасибо!
    1. ReConcept 30 января 2018, 18:26 # 0
      Пожалуйста! Рады помочь!
      1. zxvorobey 04 апреля 2018, 02:13(Комментарий был изменён) # 0
        Доработал для бутстрап3

        @media (max-width: 767px) {
        .video {
        margin-left: -30px;
        margin-right: -30px;
        padding-top: 25px;
        top: 10px;
        }
        }

        .video {position:relative;padding-bottom:56.25%;/*пропорции видео 16:9 */padding-top:; height:0;}

        .video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
        1. ReConcept 04 апреля 2018, 08:57 # 0
          Спасибо, zxvorobey! Уверен, пользователи Bootstrap оценят.
    2. Александр 02 марта 2018, 21:41 # 0
      Спасибо! Очень удобное решение
      1. Reconcept 02 марта 2018, 21:51 # 0
        Пожалуйста, Александр! Рады, что пригодилось!
      2. Сергей Вчера в 23:20 # 0
        Огромное спасибо! Легко, просто и эффективно. А то я мучился со всякими кривыми j скриптами.