Устанавливаем видео с youtube/vimeo на задний фон

Речь пойдет об jQuery плагинах YTPlayer и Vimeo_player. Сложно что либо добавить к официальным описаниям на github и демосайтах, т.к. подключение и использование не отличается от многих других jQuery плагинов.

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

Если вы имеете достаточно опыта работы с плагинами, то не стану вас задерживать, вот официальные доки:

Плагин для интеграции видео с Youtube

https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

Плагин для интеграции видео с Vimeo

https://github.com/pupunzi/jQuery.mb.vimeo_player/wiki/Documentation

Алгоритм настройки и использования плагинов очень похож, потому дальнейшие пояснения буду вести на примере YTPlayer.

Подключение файлов

В примере подключается 3-я версия jQuery, но реальные требования существенно ниже. Я интегрировал плагин в тему Drupal 7, где использовал jQuery версии 1.7. Но, видимо, выбрал не удачный момент для скачивания файлов, потому что половина функций YTPlayer не работала. То, что последняя версия в репозитории может быть «битой», ожидалось мной меньше всего. Я потратил некоторое время на то, чтобы разобраться с этой проблемой. В итоге, взял файлы плагина прямо с демо страницы.

Подключение плагина

Инициализацию рекомендуется проводить следующим образом:

Все параметры видео вы указываете в контейнере playerDomID, но видео проигрывается не в нём же, а в том контейнере, что указан в параметре containment:

Вместо URL можно подставить просто видео ID, в данном примере это «BsekcY04xvQ».

Возможности

Кроме управления видео, плагин позволяет

  • накладывать различные фильтры (доступны все CSS фильтры),
  • накладывать водяные знаки,
  • управлять громкостью звука.

Мобильные устройства

Youtube не позволяет выполнить запуск видео на мобильном устройстве. Чтобы на мобильнике вместо фонового видео не было шедевра Малевича, можно задать параметр — mobileFallbackImage, где нужно указать урл фоновой картинки.

Если плагин используется в качестве плееера, то управлять видео Youtube позволит только штатными инструментами.

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

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

jQuery плагин для ввода диапазона значений

Февраль 22, 2017 г.

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

Читать

Как определить загружен ли определенный плагин для jQuery

Сентябрь 7, 2018 г.

Возможно ли проверить загружен или нет определенный jQuery плагин? Нет ничего проще! Самый краткий вариант проверки того, определен ли в текущий ...

Читать

 

Комментарии к «Устанавливаем видео с youtube/vimeo на задний фон»

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



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