Адаптивная верстка Youtube видео ролика (без использования API/плагинов)

В продолжение статьи о адаптивном показе видео с видео-хостинга YouTube. Случай, когда воспроизведением ролика не требуется управлять, позволяет отказаться от использования 3rd part плагинов или YouTube API.

Пусть у нас в верстке есть контейнер:

Инициализация

Я использую jQuery, к которому привык, но это не обязательно.

ID ролика сохраним в переменной video_id.

Собираем url со всеми нужными флажками autoplay, loop, mute, а не нужные флажки сбрасываем — rel, controls, showinfo и т.п.

Создаём youtube iframe с полученной ссылкой:

Следим за размерами видео

За размерами фрейма следит специальная функция vidRescale. Она изменяет отступы, чтобы центрировать видео и размеры, чтобы закрыть полностью «сцену», в роли которой у нас контейнер .video-container.

Значение ratio в примере — стандартное. Как получить aspect ratio для нестандартных видео — читайте тут.

Т.к. vidRescale  должна быть вызвана в определенный момент, а именно когда меняются размеры контейнера, то нужно правильно организовать её вызов. Если размеры контейнера меняются вместе с размерами окна (window), то используйте следующий код:

Если надо отслеживать только контейнер, то пишем что то вроде следующего:

Стили

Добавим вспомогательные стили:

Пример реализации

Ну и в конце живой пример, основанный на описанной выше технике.

Мало букафф? Читайте есчо !

Используем сворачивающиеся (collapsible) группы полей в Drupal

Апрель 21, 2012 г.

В админке друпала используется эффект сворачивания/разворачивания группы полей форм (fieldset). Почему бы не использовать эффект для собственных нужд? Эффект реализуется встроенным скриптом misc/collapse.js. Так что не забудьте подключить его в ...

Читать

Обновить path alias в таксономии

Октябрь 24, 2024 г.

Пример кода работы с entityQuery и Entity API. В данном примере мы пройдемся по синонимам терминов таксономии и произведем простую замену или создадим новый синоним согласно установленному в системе шаблону. В 8ке синонимы (path_alias) - это ...

Читать

Лишние сетевые интерфейсы в WSL Ubuntu

Февраль 5, 2025 г.

Продолжаю использовать Ubuntu (v22) на WSL 2. Не давно столкнулся с не приятным моментом. Из WSL вдруг перестала быть видимой внешняя сеть, хотя до этого ...

Читать

Подстановка токенов в коде Drupal 9

Август 1, 2021 г.

Ядро и модули объявляют множество токенов подстановки. Рассмотрим как получить доступ к глобальному объекту типа \Drupal\Core\Utility\Token и выполнить подстановку в строке. Ядро предоставляет экземпляр объекта через следующий запрос: [crayon-687ae85b0be08452963810/] ...

Читать
 

Комментарии к «Адаптивная верстка Youtube видео ролика (без использования API/плагинов)»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: