Home • Статьи • Адаптивное видео YouTube для любого сайта

Адаптивное видео YouTube для любого сайта Делаем просто и весело!

📝 Пост № 66 от 25 января 2022 | В категории Статьи | Комментариев нет

Вы наверняка встречались с такой ситуацией, когда открываете ютубовский ролик на каком-либо сайте на своем мобильнике и видео залезает за пределы окна просмотра. Такой вариант не есть хороший… во-первых для посетителей, да и с точки зрения SEO тоже.

Это довольно-таки частая ошибка при верстке сайтов. И сводится она к следующему…

Как вы, наверняка заметили, код eframe для вставки на сайт у ютуба задается уже с размерами. И чаще всего они постоянны для ролика — 560 пикселей ширина и 315 пикселей высота. Есть два решения устранения этой проблемы (а может и больше…):

Первое — в стилях прописать параметры для каждого разрешения экрана девайса. Это куча строк кода
И второе — задать размеры в процентах к разрешению экрана по высоте, которое, как мне видится, является наиболее простым и универсальным.

Для этого создадим блок, дадим ему, к примеру, имя — frame_ytb и внутри этого блока поместим код фрейма, скопированного с YouTube. Выглядеть это будет так.

<div class="frame_ytb">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/3nyclUKnF4A" frameborder="0" allowfullscreen></iframe>
</div>

А в css файле вашей темы пропишем следующее:

.frame_ytb{
  overflow:hidden;
  position:relative;
  padding-bottom:56.25%; /* Размер окна 16:9 */
  padding-top:30px;
  height:0;
}
.frame_ytb iframe {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}

Как вы заметили, в коде аннотация — Размер окна 16:9. Если у вас размер видео имеет ношение 4:3, то в коде нужно прописать padding-bottom:75%. Вот и все.

Таким нехитрым способом можно сделать адаптивное окно ролика для любых разрешений экран любого девайса.

Удачи и до новых встреч!
С уважением, MasterPRO