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


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

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

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

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


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

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

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

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

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

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



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

QR-код: <?php the_title(); ?>

COVID-19 в Латвии. Кто виноват?

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



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

Мастерская Каминов и Интерьеров

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

Вход на сайт

Архив




Мой YouTube


Подпишись!  

Инфо посетителя

IP вашего сервера: 91.203.69.240
Ваш IP: 3.238.125.76
Ваша страна:
Ваш город:

Мобильная автомойка мощностью 200W на базе аккумулятора от Makita 18-21V - уникальная возможность экономии ваших средств! Один раз купив этот пистолет-автомойку, вы решите сразу несколько задач.

Уже на 8-й мойке своего авто ваш агрегат окупится - проверено!

Комплект из двух батарей позволит вам выполнить любую из поставленных задач по орошению... чего угодно!