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


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

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

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

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


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

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

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

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

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

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


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

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

Вашему вниманию уже 185 публикаций для ознакомления.




Рекомендую!

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



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


Наберитесь терпения - новые публикации в процессе осмысления...




За всё время работы сайта Akismet заблокировал 6,637 попыток cпама.

Поиск по сайту

Вход на сайт

  |  

Подпишись на новости блога!

Архив


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

Куча лайфхаков в моём TikTokе!

master-tiktok

Крутые товары