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


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

📝 Пост №   67  от 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)
Загрузка...


Портативная ленточная пила VEVOR
Ленточная портативная пила оснащена мощным, 10 амперным двигателем мощностью 1100 Вт с регулируемой (6 позиций) скоростью для резки металла, дерева, пластика и др. материалов....

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

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


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




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

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

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

Вход на сайт

  |  


Архив

Геолокация

Мой YouTube


ПОДПИШИСЬ!




hosting