👀 Использование видео на страницах сайта во многих случаях не игрушка, а реальный инструмент для удовлетворения интересов пользователя, поэтому его не надо игнорировать, если видео реально расширит информационный сегмент.
Наиболее часто вебмастера используют видео из YouTube, так как на сервисе не только одна из самых больших подборок роликов, но и удобно копировать их HTML-код. Тыц правой кнопкой мышки и код для установки на сайт у вас в кэше, остается его вставить в нужное место страницы своего сайта.
Горизонтальная прокрутка
😢 Тут и рождается проблемка, так как даже на последней версии Joomla 5 ютубовское видео не адаптируется под мобильные устройства автоматом. Ролик не вмещается в окно мобильного устройства по ширине, отсюда:
- ✔ Неудобство для пользователей.
- ✔ Матом ругаются Яндекс с Гугл за отсутствие адаптации страниц (горизонтальная прокрутка).
Примеры кода
☝ По умолчанию Ютуб отдает нам такую структуру кода:
<iframe width="640" height="360" src="https://www.youtube.com/embed/X-6zXgJR_OQ" frameborder="0" web-share" allowfullscreen></iframe>
Как видим, код не обернут в div, поэтому придется оформлять вывод iframe через css шаблона Joomla.
Если ваш сайт только стартует, то можно обернуть код Ютуба по типу:
<div class=" nc-fitvids-wrapper">
<iframe width="640" height="360" src="https://www.youtube.com/embed/X-6zXgJR_OQ" frameborder="0" web-share" allowfullscreen></iframe>
</div>
☝ Где «nc-fitvids-wrapper» - это класс, который можно легко оформить через стили с богатым выбором настроек оформления. Пример кода:
.nc-fitvids-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Если же у вас уже на сайте тысячи роликов в формате iframe, то это не вариант – руки отвалятся всё оборачивать в див.
Используйте для оформления видео в iframe код:
iframe {max-width: 100%; height: auto; aspect-ratio: 16/9;}
Куда вставить
📝 Его пропишите в файл стилей CSS вашего шаблона Joomla – это или templates.css или user.css (читайте как и зачем его создавать).
Код указывает на следующие правила вывода видео:
- ✔ Ширина элемента максимум 100%.
- ✔ Высота автоматическая.
- ✔ Соотношение сторон блока 16 к
☝ Для понимания, если вы пропишите aspect-ratio: 1/1, то видос будет квадратный)).
Вывод
✨ Это оптимальный вариант простого кода для адаптации видео с Ютуб, если вам дорого время и нет желания заморачиваться с оберткой iframe в блоки div.