Адаптивная верстка 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), то используйте следующий код:

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

Стили

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

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

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

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

Как в Drupal добавить страницу?

Май 16, 2017 г.

Иногда пользователи не могут разобраться с самыми простыми вещами. Для разработчиков эти вопросы могут казаться смешными и нелепыми, потому что это буквально ...

Читать

Конструирование визуальных компонентов в kotlin

Март 11, 2023 г.

Android studio предоставляет набор стандартных компонентов, таких как TextView, LinearLayout и пр. Но довольно часто приходится оперировать группами таких ...

Читать

Корзина не пуста - изменим стиль пункта меню

Август 2, 2023 г.

Использую Drupal Commerce, и в меню у меня есть пункт "Корзина", со ссылкой на корзину пользователя. Хочется, чтобы стиль пункта меню менялся, если корзина не пуста. Я буду использовать hook_preprocess_menu темы, чтобы изменить нужный пункт меню ...

Читать

Отправляем письмо из Drupal 7 в формате HTML

Июнь 24, 2011 г.

Разработчики решили в drupal 7 по умолчанию сделать отправку писем в формате plain text. Довольно неожиданный ход. Фактически, когда вы вызываете drupal_mail, на последнем этапе вызывается функция форматирования письма и там уже удаляются все html теги. ...

Читать
 

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

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



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