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



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



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


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


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


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

Вход на сайт

Архив




Мой YouTube


ПОДПИШИСЬ!


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

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

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