n-wp.ru — блог о WordPress
Два способа использовать видео из YouTube в качестве фона -- плагин mb.YTPlayer и скрипт Tubular | n-wp.ru

Два способа использовать видео из YouTube в качестве фона — плагин mb.YTPlayer и скрипт Tubular

Украшение блога фоновым видео: решение с помощью плагина и jQuery-скрипта.

Сейчас стало модным использовать в качестве фона не только изображения, но и видео. Так поступают креативные студии, так делают некоторые блоггеры, так оформляют портфолио — движущаяся картинка привлекает внимание, не надоедает, и иногда действительно выглядит впечатляюще. Самым доступным источником видео роликов является YouTube — достаточно зарегистрировать себе аккаунт, и вы становитесь обладателем безразмерного хранилища видеофайлов. Предлагаю вам два способа использовать видео из YouTube в качестве фона — с помощью плагина и ручной способ внедрения java-скрипта в код темы, которую вы используете.

Автоматический способ — плагин mb.YTPlayer for background videos

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

Два способа использовать видео из YouTube в качестве фона

В настройках плагина вы можете указать видео, которое будет использоваться по-умолчанию — указать youtube-ссылку. Так же вы можете указать параметры воспроизведения этого видео — видимость элементов управления, соотношение сторон, время начала окончания воспроизведения, звук, зацикливание.

Два способа использовать видео из YouTube в качестве фона

Вы можете на любой странице или в любом посте использовать видео, отличное от установленного в настройках. Плагин mb.YTPlayer for background videos подключает видео с помощью шорткода, который можно вставить в пост с помощью кнопки на панели инструментов.

Два способа использовать видео из YouTube в качестве фона

При вставке шорткода вы можете указать параметры воспроизведения.

Скачать
mb.YTPlayer for background videos
вы перейдете по ссылке https://wordpress.org/plugins/wpmbytplayer/

Ручной способ — скрипт Tubular

Два способа использовать видео из YouTube в качестве фона

Ручной способ будет интересен тем, кто хочет вручную указать, к какому элементу HTML-сктруктуры нужно добавлять видео. Его можно использовать при создании собственной темы, в которой видео будет показываться только на отдельных страницах, созданных с помощью системы шаблонов.

Вам нужно подгрузить скрипт-библиотеку jQuery. Если вы используете современную тему, то скорее всего это уже сделано: проверьте файлы functions.php и header.php, нет ли там подключения этого скрипта. Если нет, то вставьте в файл header.php до открывающегося тега body следующую строчку:

Далее нужно подключить сам скрипт Tubular. Для этого сразу после строчки подключения jQuery добавьте:

Параметр src указывает, где находится скрипт относительно корневой папки вашего блога. Если вы его записали в папку с темой, то можно модернизировать код таким образом, чтобы расположени папки с темой определялось автоматически:

После этого в файле (шаблоне), отвечающем за вывод определенной страницы, нужно добавить вызов скрипта, выводящего фоновое видео:

idOfYourVideo — это ID видео из YouTube. Это один из параметров, являющийся обязательным, который должен присутствовать в коде. Можно использовать и другие параметры воспроизведения:

  • ratio: 16/9 //используйте 4/3 или 16/9
  • mute: true //по-умолчанию звук отключен
  • repeat: true //по-умолчанию идет повторение
  • wrapperZIndex: 99 //z-index по-умолчанию
  • playButtonClass: ‘tubular-play’ //класс кнопки воспроизведения
  • pauseButtonClass: ‘tubular-pause’ //класс кнопки паузы
  • muteButtonClass: ‘tubular-mute’ //класс кнопки отключения звука
  • volumeUpClass: ‘tubular-volume-up’ //класс кнопки увеличения громкости
  • volumeDownClass: ‘tubular-volume-down’ //класс кнопки уменьшения громкости
  • increaseVolumeBy: 10 // шаг изменения громкости от 1 до 100%
  • start: 0 // стартовая позиция в секундах

Пример активации скрипта с несколькими параметрами:

Скрипт лучше вставлять в footer.php.

Посмотреть
Tubular
вы перейдете по ссылке http://www.seanmcodeambridge.com/tubular/
Скачать
Tubular
вы перейдете по ссылке https://code.google.com/p/jquery-tubular/

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

Комментировать

/* ]]> */