Как использовать видео YouTube в качестве фона страницы с помощью jQuery

Ранее мы делились с вами 5 лучших плагинов jQuery для добавления видео в качестве фона на ваш сайт. Эти плагины позволяют вам встраивать видео с вашего собственного сервера (или внешних серверов), пока они обслуживаются в mp4, ogg, wav и т. Д. Однако, что делать, если вы не хотите размещать видео, а вместо этого использовать сервис, такой как YouTube для этого ? Конечно, плагины, упомянутые в верхней части, не подходят для вас.

К счастью, есть еще один плагин, который вы можете использовать, чтобы использовать видео, размещенные на YouTube, в качестве фона для своего веб-сайта. Мы говорим о плагине jquery.mb.YTPlayer.

1. Скачайте и включите jquery.mb.YTPlayer

Первое, что вам нужно сделать, чтобы добавить видео с YouTube в качестве фона для вашего сайта, это загрузить плагин jquery.mb.YTPlayer. Этот компонент jQuery с открытым исходным кодом позволяет вам легко создать свой собственный проигрыватель Youtube или использовать любое видео Youtube в качестве фона для своей страницы. Вам понадобятся в основном 3 файла:

  1. jQuery (очевидно, так как это плагин jQuery)
  2. YTPlayer.css (основные стили для видео фона)
  3. jquery.mb.YTPlayer.js (файл плагина)

Вы можете получить 2 файла плагина от релизы проекта в Github здесь (ZIP-файл) или загрузку из браузера файлы из папки dist репозитория dist. После загрузки файлов просто включите их в качестве ссылок, используя скрипт и теги ссылок в вашем документе:

Важный

Плагин, как и многие другие, требует, чтобы документ HTML подавался с сервера (протокол http или https). Доступ к плагину из file:// протокол, сделает плагин непригодным для использования.


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

2. Использование плагина

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



$("#controller").YTPlayer({
// URL of the YouTube video
videoURL:'http://youtu.be/BsekcY04xvQ',
// use "body" for the entire screen
// or a selector for a custom element
containment: "#video-container"
// for more initialization options,
// please read the docs
});

Чтобы решить, где видео должно появиться, во время инициализации объект аргумента ожидает параметр, а именно контейнер, где вы должны предоставить селектор DOM (идентификатор элемента или класс), поэтому, если вы хотите, чтобы он отображался как полноэкранный, вы должны использовать body как контейнер. Существует множество опций инициализации для плагина, поэтому вы можете прочитать, что вам интересно в документы в области инициализации.

Полноэкранный пример

В следующем документе показано, как использовать видео YouTube в качестве фона всей страницы:


YouTube Video as Page Background
// When the document is ready
$(document).ready(function(){
// Initialize YouTube player
$("#player-control").YTPlayer({
// URL of the YouTube video
videoURL:'http://youtu.be/BsekcY04xvQ',
// If you want it as background of your website
// or of an element e.g #elementId
containment: "body",
autoplay: true,
mute: true,
startAt: 0,
opacity: 1,
// Hide YouTube Controls
showControls: false,
onReady: function(){
console.log("Player succesfully initialized");
},
onError: function(err){
console.log("An error ocurred", err);
}
});
});

Пример пользовательского элемента DOM

В следующем примере показано, как установить видео YouTube в качестве фона пользовательского элемента вашего документа:


/* Define some dimensions to the container where the video will appear */
#dom-element {
width: 600px;
height: 400px;
position: relative;
top: 0;
left: 0;
z-index: 0;
background-size: cover;
}
YouTube Video as Page Background
// When the document is ready
$(document).ready(function(){
// Initialize YouTube player
$("#player-control").YTPlayer({
// URL of the YouTube video
videoURL:'http://youtu.be/BsekcY04xvQ',
// As we want it as background of a custom element, we'll use
// the ID of the custom element
containment: "#dom-element",
autoplay: true,
mute: true,
startAt: 0,
opacity: 1,
// Hide YouTube Controls
showControls: false,
onReady: function(){
console.log("Player succesfully initialized");
},
onError: function(err){
console.log("An error ocurred", err);
}
});
});
Ссылка на основную публикацию
Adblock
detector