Адаптивная верстка Youtube видео ролика как фона произвольного контейнера

Это продолжение статьи о адаптивном показе видео из разных источников. Здесь я расскажу о youtube роликах. Для управления роликом буду использовать jQuery плагин jquery.mb.YTPlayer

У нас есть много вариантов как выполнить задачу:

  • использовать плагин, который я подобрал;
  • использовать  API YouTube — доки вот тут:
    https://developers.google.com/youtube/iframe_api_reference;
  • вообще не пользоваться плагинами и API.

Нужно понять, что нам даёт каждый вариант. Плагин или API позволит нам выполнить функции вроде остановки / запуска видео. Если этого не требуется, то можно обойтись без плагинов. Вариант без использования плагина вот тут.

Итак, для начала подключим jquery.mb.YTPlayer и jQuery. Стили плагина можно не инклюдить, они нам не нужны.

В секции <head> для мобильных устройств пригодится вот это (я думаю здесь комментарии не нужны):

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

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

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

Далее идет кусочек кода — инициализация плагина. Обратите внимание на параметры — мы отключаем звук — mute, зацикливаем видео — loop, и отключаем некоторые элементы, которые позволяет отключить плагин.

Адаптируем размеры видео

Специальная функция для обновления размеров сцены и фрейма — vidRescale. Так как плагин добавляет свою  разметку, то приходится следить за 2мя контейнерами.

Эту функцию (vidRescale) надо вызывать в момент изменения размеров контейнера. Если размеры контейнера меняются вместе с размерами окна (window), то используйте код

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

Так мы мониторим размеры контейнера и вызываем функцию пересчета, если замечаем изменения.

Пропорции видео

Отдельно стоит упомянуть о пропорциях видео (aspect rate) для YouTube. Я использовал стандартное значение — 16/9. Но бывают ролики с совершенно кастомным отношением сторон, как выудить значение ? Читайте тут.

Управление роликом

Плагин я подключал только для того, чтобы иметь возможность управлять воспроизведением ролика.

Стили

Осталось только взглянуть на стили.

Часть стилей борется с последствиями использования плагина, часть нужна для выравнивания по центру.

А вот живой пример на основе предложенного кода (на десктопе можно менять размеры контейнера, потянув за уголок справа-внизу).

Написать комментарий

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

Работа с config split модулем в Drupal

Март 16, 2024 г.

Задача модуля - дать возможность разделить конфигурации сайта для разных системных окружений. На локальном сервере вы можете использовать такие модули ...

Читать

Конструктор схемы проезда на Яндекс

Август 31, 2012 г.

Типовые задачи решаются все проще и проще. Когда то  я рассказывал как вставить карту со схемой проезда, используя api google.maps. С тех пор прошло довольно много времени. Теперь я расскажу как сделать примерно тоже самое только проще и с помощью конструктора ...

Читать

 

Комментарии к «Адаптивная верстка Youtube видео ролика как фона произвольного контейнера»

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



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