Устанавливаем видео с 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 позволит только штатными инструментами.

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

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

Формирование связанных списков select произвольной вложенности

Декабрь 11, 2016 г.

Не ослабевает интерес к вопросу о динамическом создании связанных выпадающих HTML списков. Для двух зависимых списков (я публиковал пример более 5 лет назад!) ситуация простая и понятная, но люди задают вопрос - а как развить пример для вложения 3х списков? ...

Читать

Раздвигающееся вертикальное меню Drupal 6

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

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

Читать

 

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

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



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