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


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

📝 Пост №   67  от 25 января 2022   |   В категории WEB Мастеру, Статьи   |   Комментариев нет Print

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

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

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

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

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

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

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

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

Просмотров: 11



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

QR-код: <?php the_title(); ?>
Метки: Web мастеруwordpressНовости блога
Обновление статьи: 25.01.2022
Короткая ссылка:
Подпишись и получай новости в числе первых!



Народная мудрость



Читайте в скором будущем


       13.12.2022  Модульные дома. Что выбрать? Модульные дома – преимущества, недостатки, производители.
       11.12.2022  Как изменить цвет папок в закладках Firefox Проверенный, рабочий вариант!.


Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

360-security

До Нового Года осталось...

Вход на сайт

Архив




Мой YouTube


ПОДПИШИСЬ!