Як зробити відео на задньому фоні за допомогою jquery.

Привіт всім! У цій статті я покажу, як зробити відео на задньому плані за допомогою невеликого плагіна.

Приклад ви можете знайти тут: https://vodkabears.github.io/vide/

Тепер заходите сюди: https://github.com/VodkaBears/Vide

Качайте архів.

На вашій сторінці підключіть JQuery і скачаний плагін.

Підготуйте ваше відео в таких форматах, як .webm, .mp4 для кросбраузерності. Також додайте постер в .jpg, .jpg і .jpg розширеннях.

Відео: Як зробити розмитий фон у відео? Ефект боке. Рада відео блогеру

додайте data-vide-bg атрибут з шляхом до відео і постеру. Відео та постер повинні мати однакове ім`я.

додайте data-vide-options атрибут для опцій, якщо вам потрібно. За замовчуванням відео без звуку, зацікліно і починається автоматично.

Відео: Video Background with jQuery

style="width:1000px- height:500px-" 
data-vide-bg="Path / to / video"data-vide-options="Loop: false, muted: false, position: 0% 0%"gt;

Також, ви можете зробити ініціалізацію через jаvascript.

$("#myBlock").vide(`Path / to / video`,{ 
 volume:1,// звук 
 playbackRate:1,// швидкість відтворення 
 muted:true,// відключений чи звук 
 loop:true,// закцікліваніе 
 autoplay:true,// Автовідтворення 
 position:"50% 50%"// вирівнювання 
}) -

У плагіна також є методи

// отримати екземпляр плагіна 
var instance = $("#yourElement").data("Vide") - 
 
// отримати відео елемент заднього фону 
instance.getVideoObject() - 
 
// зміна розміру заднього відео 
// це викликається автоматично, якщо розмір вікна (або елемента, якщо ви будете використовувати щось на зразок цього: 
// https://github.com/cowboy/jquery-resize) 
instance.resize() - 
 
// видалення екземпляра плагіна 
instance.destroy() -