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

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

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

Подключаем fancybox в Drupal 6

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

Fancybox - известный плагин jQuery для создания эффекта "просмотра в окошке". Давайте подключим его в 6-ю версию Drupal. Ряд "деятелей" предлагают поставить для этой цели, кроме самой библиотеки, ещё два плагина - jquery_update и fancybox. Определенный ...

Читать

Украшательства на сайте : делаем надпись поверх картинки

Март 13, 2013 г.

Долгая, вообще, история с картинками. Хорошо, если есть шаблон, где предусмотрены позиции картинок, может быть какой то слайдер или галерея. А все картинки ...

Читать

 

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

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



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