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



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

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

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

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


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

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

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

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

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

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


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

Рекомендую!

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 Оценок: (1 среднее: 5,00 из 5)
Загрузка...


Просмотров страницы: 1434
Метки: Web мастеруwordpressНовости блога
Обновление статьи: 25.01.2022
Короткая ссылка:
Подпишись и получай новости в числе первых!

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



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


       16.04.2024  Второе дыхание (2016) Драма. Детектив Оболгать легко. Оправдаться сложно....


Подписаться
Уведомить о

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

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Вход на сайт

  |  


ПОДПИШИСЬ!


Архив

Геолокация посетителя



hosting