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

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

Стили

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

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

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

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

Программно меняем url alias в Drupal 7

Март 9, 2017 г.

Чтобы программно изменить/задать ЧПУ публикации (или другого объекта) в Drupal, нужно определить три параметра - системный адрес объекта, новый псевдоним и код языка. К примеру, для объекта node код может быть следующим: [crayon-6876b82f7f247984441032/] ...

Читать

Скорость воспроизведения аудио-трека (javascript, HTML5 тэг AUDIO)

Декабрь 21, 2015 г.

Редко реализуемый функционал - скорость воспроизведения. Возможно, вы делаете страничку - пульт для DJ, где они смогут микшировать треки, замедлять их, включать и выключать их и т.д. Тогда эта возможность вам пригодится. :) Итак, мы имеем объект ...

Читать

Загрузка файла через форму в Drupal

Май 19, 2023 г.

Посмотрим как получить непосредственный доступ к файлу без загрузки файла в хранилище, при его загрузке в поле типа "file" Form API. Много гайдов посвящено тому как использовать поле managed_file, а для unmanaged случая считается, что разработчик ...

Читать

Работа с картинками в API Drupal 7

Сентябрь 28, 2015 г.

Собрал здесь несколько полезных функций, которые могут быть полезны для работы с полем изображений в Drupal семерочке. Данная коллекция представляет из себя закладку с примерами. В памяти всё не удержишь, приходится ползать по выполненным проектам - копипастить ...

Читать
 

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

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



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