Адаптивная верстка 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. Но бывают ролики с совершенно кастомным отношением сторон, как выудить значение ? Читайте тут.

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

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

Стили

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

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

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

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

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

Обработка события click или touchstart

Октябрь 31, 2018 г.

Широкое применение мобильных устройств для доступа в интернет накладывает свои специфические требования на разработку веб-сайтов. Привычный обработчик onclick может срабатывать совместно с ontouchstart, а может не срабатывать вовсе на мобильном устройстве. ...

Читать

GREP - показываем только ближайшее символы от найденного совпадения

Ноябрь 28, 2018 г.

По умолчанию GREP выводит всю строку, где был обнаружен указанный вами шаблон поиска. Для форматированных текстовых файлов это подходит. Но если в поиск попадает минифицированный текстовый или binary файл, то в консоль вываливается неприлично много текста. ...

Читать

 

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

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



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