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

Подпишитесь на новости блога и получайте сообщения в числе первых!

На сегодня в блоге вашему вниманию представлено уже 263 публикаций!

Ваши данные в полной безопасности. Мы не рассылаем спам.

◄ Случай в вагоне СВ… Бывает и такое..!

Как сегодня делают бюсты. Мастер класс ►

Просмотров страницы: 3485
Метки: Web мастеру | wordpress | Новости блога |
Последнее обновление статьи: 09.01.2026
Короткая ссылка: https://master-sv.com/blog/?p=6059