Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

youtube-background

Package Overview
Dependencies
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

youtube-background - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

src/lib/controls.js

251

jquery.youtube-background.js

@@ -1,2 +0,2 @@

/* youtube-background v1.1.0 | https://github.com/stamat/youtube-background | MIT License */
/* youtube-background v1.1.1 | https://github.com/stamat/youtube-background | MIT License */
(() => {

@@ -195,8 +195,8 @@ // src/lib/buttons.js

this.isIntersecting = false;
this.state = {};
this.state.playing = false;
this.state.muted = false;
this.playing = false;
this.muted = false;
this.currentState = "notstarted";
this.initialPlay = false;
this.initialVolume = false;
this.volume = 1;
this.params = {};

@@ -232,6 +232,7 @@ const DEFAULTS = {

this.params.resolution_mod = parseResolutionString(this.params.resolution);
this.state.playing = this.params.autoplay;
this.state.muted = this.params.muted;
this.currentTime = this.params["start-at"];
this.duration = this.params["end-at"];
this.playing = this.params.autoplay;
this.muted = this.params.muted;
this.volume = this.params.volume;
this.currentTime = this.params["start-at"] || 0;
this.duration = this.params["end-at"] || 0;
this.percentComplete = 0;

@@ -248,3 +249,3 @@ if (this.params["start-at"])

innerHtml: '<i class="fa"></i>',
initialState: !this.state.playing,
initialState: !this.playing,
stateClassName: "paused",

@@ -261,3 +262,3 @@ condition_parameter: "autoplay",

innerHtml: '<i class="fa"></i>',
initialState: this.state.muted,
initialState: this.muted,
stateClassName: "muted",

@@ -295,5 +296,5 @@ condition_parameter: "muted",

resize(element) {
if (this.params["fit-box"])
return;
proportionalParentCoverResize(element || this.playerElement, this.params.resolution_mod, this.params.offset);
if (!this.params["fit-box"])
proportionalParentCoverResize(element || this.playerElement, this.params.resolution_mod, this.params.offset);
this.dispatchEvent("video-background-resize");
}

@@ -381,2 +382,3 @@ stylePlayerElement(element) {

clearInterval(this.timeUpdateTimer);
this.dispatchEvent("video-background-destroyed");
}

@@ -402,2 +404,12 @@ setDuration(duration) {

}
setStartAt(startAt) {
this.params["start-at"] = startAt;
}
setEndAt(endAt) {
this.params["end-at"] = endAt;
if (this.duration > endAt)
this.duration = endAt;
if (this.currentTime > endAt)
this.onVideoEnded();
}
dispatchEvent(name) {

@@ -426,5 +438,3 @@ this.element.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: this }));

for (let k in defaults) {
if (!params.hasOwnProperty(k)) {
res_params[k] = defaults[k];
}
res_params[k] = !params.hasOwnProperty(k) ? defaults[k] : params[k];
}

@@ -499,2 +509,4 @@ }

});
if (this.volume !== 1 && !this.muted)
this.setVolume(this.volume);
}

@@ -526,3 +538,3 @@ injectScript() {

}
if (this.params.autoplay && this.params["always-play"]) {
if (this.params.autoplay && (this.params["always-play"] || this.isIntersecting)) {
src += "&autoplay=1";

@@ -620,3 +632,3 @@ }

softPause() {
if (!this.state.playing || !this.player)
if (!this.playing || !this.player)
return;

@@ -626,3 +638,3 @@ this.player.pauseVideo();

softPlay() {
if (!this.state.playing || !this.player)
if (!this.playing || !this.player)
return;

@@ -634,3 +646,3 @@ this.player.playVideo();

return;
this.state.playing = true;
this.playing = true;
if (this.params["start-at"] && this.player.getCurrentTime() < this.params["start-at"]) {

@@ -642,3 +654,3 @@ this.seekTo(this.params["start-at"]);

pause() {
this.state.playing = false;
this.playing = false;
this.player.pauseVideo();

@@ -649,3 +661,3 @@ }

return;
this.state.muted = false;
this.muted = false;
if (!this.initialVolume) {

@@ -661,9 +673,15 @@ this.initialVolume = true;

return;
this.state.muted = true;
this.muted = true;
this.player.mute();
this.dispatchEvent("video-background-mute");
}
getVolume() {
if (!this.player)
return;
return this.player.getVolume() / 100;
}
setVolume(volume) {
if (!this.player)
return;
this.volume = volume;
this.player.setVolume(volume * 100);

@@ -709,4 +727,4 @@ this.dispatchEvent("video-background-volume-change");

this.player.on("timeupdate", this.onVideoTimeUpdate.bind(this));
if (this.params.volume !== 1 && !this.params.muted)
this.setVolume(this.params.volume);
if (this.volume !== 1 && !this.muted)
this.setVolume(this.volume);
}

@@ -726,3 +744,3 @@ generatePlayerElement() {

}
if (this.params.autoplay && this.params["always-play"]) {
if (this.params.autoplay && (this.params["always-play"] || this.isIntersecting)) {
src += "&autoplay=1";

@@ -827,3 +845,3 @@ }

softPause() {
if (!this.state.playing || !this.player)
if (!this.playing || !this.player)
return;

@@ -833,3 +851,3 @@ this.player.pause();

softPlay() {
if (!this.state.playing || !this.player)
if (!this.playing || !this.player)
return;

@@ -841,3 +859,3 @@ this.player.play();

return;
this.state.playing = true;
this.playing = true;
this.player.play();

@@ -848,3 +866,3 @@ }

return;
this.state.playing = false;
this.playing = false;
this.player.pause();

@@ -855,3 +873,3 @@ }

return;
this.state.muted = false;
this.muted = false;
if (!this.initialVolume) {

@@ -867,9 +885,15 @@ this.initialVolume = true;

return;
this.state.muted = true;
this.muted = true;
this.player.setMuted(true);
this.dispatchEvent("video-background-mute");
}
getVolume() {
if (!this.player)
return;
return this.player.getVolume();
}
setVolume(volume) {
if (!this.player)
return;
this.volume = volume;
this.player.setVolume(volume);

@@ -909,6 +933,9 @@ this.dispatchEvent("video-background-volume-change");

const playerElement = document.createElement("video");
playerElement.toggleAttribute("playsinline", true);
playerElement.toggleAttribute("loop", this.params.loop);
playerElement.toggleAttribute("autoplay", this.params.autoplay && (this.params["always-play"] || this.isIntersecting));
playerElement.toggleAttribute("muted", this.params.muted);
playerElement.setAttribute("playsinline", "");
if (this.params.loop)
playerElement.setAttribute("loop", "");
if (this.params.autoplay && (this.params["always-play"] || this.isIntersecting))
playerElement.setAttribute("autoplay", "");
if (this.muted)
playerElement.setAttribute("muted", "");
if (this.params["lazyloading"])

@@ -921,4 +948,4 @@ playerElement.setAttribute("loading", "lazy");

this.playerElement = this.player;
if (this.params.volume !== 1 && !this.params.muted)
this.setVolume(this.params.volume);
if (this.volume !== 1 && !this.muted)
this.setVolume(this.volume);
this.playerElement.setAttribute("id", this.uid);

@@ -1015,3 +1042,3 @@ this.stylePlayerElement(this.playerElement);

softPause() {
if (!this.state.playing || !this.player)
if (!this.playing || !this.player)
return;

@@ -1021,3 +1048,3 @@ this.player.pause();

softPlay() {
if (!this.state.playing || !this.player)
if (!this.playing || !this.player)
return;

@@ -1036,3 +1063,3 @@ this.player.play();

}
this.state.playing = true;
this.playing = true;
this.player.play();

@@ -1043,3 +1070,3 @@ }

return;
this.state.playing = false;
this.playing = false;
this.player.pause();

@@ -1050,3 +1077,3 @@ }

return;
this.state.muted = false;
this.muted = false;
this.player.muted = false;

@@ -1062,9 +1089,15 @@ if (!this.initialVolume) {

return;
this.state.muted = true;
this.muted = true;
this.player.muted = true;
this.dispatchEvent("video-background-mute");
}
getVolume() {
if (!this.player)
return;
return this.player.volume;
}
setVolume(volume) {
if (!this.player)
return;
this.volume = volume;
this.player.volume = volume;

@@ -1085,22 +1118,25 @@ this.dispatchEvent("video-background-volume-change");

const self2 = this;
this.intersectionObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
const uid = entry.target.getAttribute("data-vbg-uid");
if (uid && self2.index.hasOwnProperty(uid) && entry.isIntersecting) {
self2.index[uid].isIntersecting = true;
try {
if (self2.index[uid].player && self2.index[uid].params.autoplay)
self2.index[uid].softPlay();
} catch (e) {
this.intersectionObserver = null;
if ("IntersectionObserver" in window) {
this.intersectionObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
const uid = entry.target.getAttribute("data-vbg-uid");
if (uid && self2.index.hasOwnProperty(uid) && entry.isIntersecting) {
self2.index[uid].isIntersecting = true;
try {
if (self2.index[uid].player && self2.index[uid].params.autoplay)
self2.index[uid].softPlay();
} catch (e) {
}
} else {
self2.index[uid].isIntersecting = false;
try {
if (self2.index[uid].player)
self2.index[uid].softPause();
} catch (e) {
}
}
} else {
self2.index[uid].isIntersecting = false;
try {
if (self2.index[uid].player)
self2.index[uid].softPause();
} catch (e) {
}
}
});
});
});
}
this.resizeObserver = null;

@@ -1132,2 +1168,11 @@ if ("ResizeObserver" in window) {

add(element, params) {
if (!element)
return;
if (element.hasAttribute("data-vbg-uid"))
return;
if (!this.intersectionObserver) {
if (!params)
params = {};
params["always-play"] = true;
}
const link = element.getAttribute("data-youtube") || element.getAttribute("data-vbg");

@@ -1157,3 +1202,3 @@ const vid_data = this.getVidID(link);

}
if (!this.index[uid].params["always-play"]) {
if (!this.index[uid].params["always-play"] && this.intersectionObserver) {
this.intersectionObserver.observe(element);

@@ -1163,5 +1208,5 @@ }

destroy(element) {
const uid = element.getAttribute("data-vbg-uid");
const uid = element.uid || element.getAttribute("data-vbg-uid");
if (uid && this.index.hasOwnProperty(uid)) {
if (!this.index[uid].params["always-play"])
if (!this.index[uid].params["always-play"] && this.intersectionObserver)
this.intersectionObserver.unobserve(element);

@@ -1174,2 +1219,7 @@ if (this.resizeObserver)

}
destroyAll() {
for (let k in this.index) {
this.destroy(this.index[k].playerElement);
}
}
getVidID(link) {

@@ -1212,3 +1262,3 @@ if (link === void 0 && link === null)

}
pauseVideos() {
pauseAll() {
for (let k in this.index) {

@@ -1218,3 +1268,3 @@ this.index[k].pause();

}
playVideos() {
playAll() {
for (let k in this.index) {

@@ -1224,2 +1274,17 @@ this.index[k].play();

}
muteAll() {
for (let k in this.index) {
this.index[k].mute();
}
}
unmuteAll() {
for (let k in this.index) {
this.index[k].unmute();
}
}
setVolumeAll(volume) {
for (let k in this.index) {
this.index[k].setVolume(volume);
}
}
initPlayers(callback) {

@@ -1255,53 +1320,2 @@ const self2 = this;

};
var SeekBar = class {
constructor(seekBarElem, vbgInstance) {
this.lock = false;
if (!seekBarElem)
return;
this.seekBarElem = seekBarElem;
this.progressElem = this.seekBarElem.querySelector(".js-seek-bar-progress");
this.inputElem = this.seekBarElem.querySelector(".js-seek-bar");
this.targetSelector = this.seekBarElem.getAttribute("data-target");
if (!this.targetSelector)
return;
this.targetElem = document.querySelector(this.targetSelector);
if (!this.targetElem)
return;
if (vbgInstance)
this.vbgInstance = vbgInstance;
this.targetElem.addEventListener("video-background-time-update", this.onTimeUpdate.bind(this));
this.targetElem.addEventListener("video-background-play", this.onReady.bind(this));
this.targetElem.addEventListener("video-background-ready", this.onReady.bind(this));
this.inputElem.addEventListener("input", this.onInput.bind(this));
this.inputElem.addEventListener("change", this.onChange.bind(this));
}
onReady(event) {
this.vbgInstance = event.detail;
}
onTimeUpdate(event) {
if (!this.vbgInstance)
this.vbgInstance = event.detail;
if (!this.lock)
requestAnimationFrame(() => this.setProgress(this.vbgInstance.percentComplete));
}
onInput(event) {
this.lock = true;
requestAnimationFrame(() => this.setProgress(event.target.value));
}
onChange(event) {
this.lock = false;
requestAnimationFrame(() => this.setProgress(event.target.value));
if (this.vbgInstance) {
this.vbgInstance.seek(event.target.value);
if (this.vbgInstance.playerElement && this.vbgInstance.playerElement.style.opacity === 0)
this.vbgInstance.playerElement.style.opacity = 1;
}
}
setProgress(value) {
if (this.progressElem)
this.progressElem.value = value;
if (this.inputElem)
this.inputElem.value = value;
}
};

@@ -1322,5 +1336,4 @@ // src/main.js

}
window.SeekBar = SeekBar;
window.VideoBackgrounds = VideoBackgrounds;
})();
//# sourceMappingURL=jquery.youtube-background.js.map

4

jquery.youtube-background.min.js

@@ -1,2 +0,2 @@

/* youtube-background v1.1.0 | https://github.com/stamat/youtube-background | MIT License */
(()=>{function l(t){t&&(t.element.classList.add(t.stateClassName),t.element.firstChild.classList.remove(t.stateChildClassNames[0]),t.element.firstChild.classList.add(t.stateChildClassNames[1]),t.element.setAttribute("aria-checked",!1))}function E(t){t&&(t.element.classList.remove(t.stateClassName),t.element.firstChild.classList.add(t.stateChildClassNames[0]),t.element.firstChild.classList.remove(t.stateChildClassNames[1]),t.element.setAttribute("aria-checked",!0))}function d(t,e){const i=document.createElement("button");i.className=e.className,i.innerHTML=e.innerHtml,i.setAttribute("role","switch"),i.firstChild.classList.add(e.stateChildClassNames[0]),i.setAttribute("aria-checked",!e.initialState),e.element=i,t.params[e.condition_parameter]===e.initialState&&l(e),i.addEventListener("click",function(s){this.classList.contains(e.stateClassName)?(E(e),t[e.actions[0]]()):(l(e),t[e.actions[1]]())}),t.buttons[e.name]={element:i,button_properties:e},t.controls_element.appendChild(i)}function w(t){if(/^\s*(true|false)\s*$/i.test(t))return t==="true"}function k(t){if(/^\s*\d+\s*$/.test(t))return parseInt(t);if(/^\s*[\d.]+\s*$/.test(t))return parseFloat(t)}function T(t){if(/^\s*\[.*\]\s*$/.test(t))try{return JSON.parse(t)}catch{}}function P(t){if(/^\s*\{.*\}\s*$/.test(t))try{return JSON.parse(t)}catch{}}function V(t){if(/^\s*\/.*\/g?i?\s*$/.test(t))try{return new RegExp(t)}catch{}}function A(t){if(/^\s*null\s*$/.test(t))return null;const e=w(t);return e!==void 0?e:k(t)||T(t)||P(t)||V(t)||t}function S(t){return Array.isArray(t)}function I(t){return typeof t=="string"}function u(t,e){return t>e&&([t,e]=[e,t]),t===e?t:(t=Math.ceil(t),e=Math.floor(e),Math.floor(Math.random()*(e-t+1))+t)}function x(t,e){return!t||!e||Number.isNaN(t)||Number.isNaN(e)?0:t/e*100}function C(t){const e=1.7777777778;if(!t||!t.length||/16[\:x\-\/]{1}9/i.test(t))return e;const i=t.split(/\s?[\:x\-\/]{1}\s?/i);if(i.length<2)return e;const s=parseInt(i[0]),a=parseInt(i[1]);return s===0||a===0||isNaN(s)||isNaN(a)?e:s/a}function p(t,e=document){if(t instanceof Array||t instanceof NodeList)return t;if(t instanceof Element)return[t];if(e instanceof Element||e instanceof Document)return e.querySelectorAll(t);if(I(e)&&(e=p(e)),!e instanceof Array&&!e instanceof NodeList)return[];const i=[];for(const s of e)i.push(...s.querySelectorAll(t));return i}function L(t,e=1,i=0){t instanceof Element&&(t=[t]),typeof t=="string"&&(t=p(t));for(const s of t){const a=s.parentNode.offsetHeight+i,r=s.parentNode.offsetWidth+i;e>r/a?(s.style.width=a*e+"px",s.style.height=a+"px"):(s.style.width=r+"px",s.style.height=r/e+"px")}}var m=/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i,c=/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|album\/(?:\d+)\/video\/|video\/|)(\d+)(?:[a-zA-Z0-9_\-]+)?/i,y=/\/([^\/]+\.(?:mp4|ogg|ogv|ogm|webm|avi))\s*$/i;function N(t){return/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(t)||/\b(Android|Windows Phone|iPad|iPod)\b/i.test(t)}function U(){return"maxTouchPoints"in navigator?navigator.maxTouchPoints>0:"matchMedia"in window?!!matchMedia("(pointer:coarse)").matches:"orientation"in window?!0:N(navigator.userAgent)}var h=class{constructor(t,e,i,s,a){if(!i)return;this.is_mobile=U(),this.type=a,this.id=i,this.element=t,this.playerElement=null,this.uid=s,this.element.setAttribute("data-vbg-uid",s),this.buttons={},this.isIntersecting=!1,this.state={},this.state.playing=!1,this.state.muted=!1,this.currentState="notstarted",this.initialPlay=!1,this.initialVolume=!1,this.params={};const r={pause:!1,"play-button":!1,"mute-button":!1,autoplay:!0,muted:!0,loop:!0,mobile:!0,"load-background":!1,resolution:"16:9","inline-styles":!0,"fit-box":!1,offset:100,"start-at":0,"end-at":0,poster:null,"always-play":!1,volume:1,"no-cookie":!0,"force-on-low-battery":!1,lazyloading:!1};this.params=this.parseProperties(e,r,this.element,["data-ytbg-","data-vbg-"]),this.params.pause&&(this.params["play-button"]=this.params.pause),this.params.resolution_mod=C(this.params.resolution),this.state.playing=this.params.autoplay,this.state.muted=this.params.muted,this.currentTime=this.params["start-at"],this.duration=this.params["end-at"],this.percentComplete=0,this.params["start-at"]&&(this.percentComplete=this.timeToPercentage(this.params["start-at"])),this.buildWrapperHTML(),!(this.is_mobile&&!this.params.mobile)&&(this.params["play-button"]&&d(this,{name:"playing",className:"play-toggle",innerHtml:'<i class="fa"></i>',initialState:!this.state.playing,stateClassName:"paused",condition_parameter:"autoplay",stateChildClassNames:["fa-pause-circle","fa-play-circle"],actions:["play","pause"]}),this.params["mute-button"]&&d(this,{name:"muted",className:"mute-toggle",innerHtml:'<i class="fa"></i>',initialState:this.state.muted,stateClassName:"muted",condition_parameter:"muted",stateChildClassNames:["fa-volume-up","fa-volume-mute"],actions:["unmute","mute"]}))}timeToPercentage(t){if(t<=this.params["start-at"])return 0;if(t>=this.duration)return 100;if(t<=0)return 0;t-=this.params["start-at"];const e=this.duration-this.params["start-at"];return x(t,e)}percentageToTime(t){if(!this.duration)return 0;if(t>100)return this.duration;if(t<0)return 0;const e=this.duration-this.params["start-at"];let i=t*e/100;return this.params["start-at"]&&(i+=this.params["start-at"]),i}resize(t){this.params["fit-box"]||L(t||this.playerElement,this.params.resolution_mod,this.params.offset)}stylePlayerElement(t){t&&(this.params["inline-styles"]&&(t.style.top="50%",t.style.left="50%",t.style.transform="translateX(-50%) translateY(-50%)",t.style.position="absolute",t.style.opacity=0),this.params["fit-box"]&&(t.style.width="100%",t.style.height="100%"))}buildWrapperHTML(){const t=this.element.parentNode;this.element.classList.add("youtube-background","video-background");const e={height:"100%",width:"100%","z-index":"0",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0};if(this.params["mute-button"]||(e["pointer-events"]="none"),(this.params["load-background"]||this.params.poster)&&(this.loadBackground(this.id),this.params.poster&&(e["background-image"]=this.params.poster),e["background-size"]="cover",e["background-repeat"]="no-repeat",e["background-position"]="center"),this.params["inline-styles"]){for(let i in e)this.element.style[i]=e[i];["absolute","fixed","relative","sticky"].indexOf(t.style.position)||(t.style.position="relative")}if(this.params["play-button"]||this.params["mute-button"]){const i=document.createElement("div");i.className="video-background-controls",i.style.position="absolute",i.style.top="10px",i.style.right="10px",i.style["z-index"]=2,this.controls_element=i,t.appendChild(i)}return this.element}loadBackground(t){this.params["load-background"],t&&(this.type==="youtube"&&(this.element.style["background-image"]=`url(https://img.youtube.com/vi/${t}/hqdefault.jpg)`),this.type==="vimeo"&&(this.element.style["background-image"]=`url(https://vumbnail.com/${t}.jpg)`))}destroy(){this.playerElement.remove(),this.element.classList.remove("youtube-background","video-background"),this.element.removeAttribute("data-vbg-uid"),this.element.style="",(this.params["play-button"]||this.params["mute-button"])&&this.controls_element.remove(),this.timeUpdateTimer&&clearInterval(this.timeUpdateTimer)}setDuration(t){if(this.duration!==t){if(this.params["end-at"]){if(t>this.params["end-at"]){this.duration=this.params["end-at"];return}if(t<this.params["end-at"]){this.duration=t;return}}else{this.duration=t;return}t<=0&&(this.duration=this.params["end-at"])}}dispatchEvent(t){this.element.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:this}))}mobileLowBatteryAutoplayHack(){this.params["force-on-low-battery"]&&(!this.is_mobile&&this.params.mobile||document.addEventListener("touchstart",()=>{!this.initialPlay&&this.params.autoplay&&this.params.muted&&(this.softPlay(),!this.isIntersecting&&!this.params["always-play"]&&this.softPause())},{once:!0}))}parseProperties(t,e,i,s){let a={};if(!t)a=e;else for(let r in e)t.hasOwnProperty(r)||(a[r]=e[r]);if(!i)return a;for(let r in a){let n;if(S(s))for(let o=0;o<s.length;o++){const v=i.getAttribute(s[o]+r);if(v){n=v;break}}else n=i.getAttribute(s+r);n!=null&&(a[r]=A(n))}return a}},f=class extends h{constructor(t,e,i,s){super(t,e,i,s,"youtube"),i&&(this.is_mobile&&!this.params.mobile||(this.injectScript(),this.player=null,this.injectPlayer(),this.STATES={"-1":"notstarted",0:"ended",1:"playing",2:"paused",3:"buffering",5:"cued"},this.timeUpdateTimer=null,this.timeUpdateInterval=250,this.initYTPlayer()))}startTimeUpdateTimer(){this.timeUpdateTimer||(this.timeUpdateTimer=setInterval(this.onVideoTimeUpdate.bind(this),this.timeUpdateInterval))}stopTimeUpdateTimer(){clearInterval(this.timeUpdateTimer),this.timeUpdateTimer=null}convertState(t){return this.STATES[t]}initYTPlayer(){!window.hasOwnProperty("YT")||this.player!==null||(this.player=new YT.Player(this.uid,{events:{onReady:this.onVideoPlayerReady.bind(this),onStateChange:this.onVideoStateChange.bind(this)}}))}injectScript(){if(window.hasOwnProperty("YT")||document.querySelector('script[src="https://www.youtube.com/player_api"]'))return;const t=document.createElement("script");t.src="https://www.youtube.com/player_api";const e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}generatePlayerElement(){const t=document.createElement("iframe");return t.setAttribute("frameborder",0),t.setAttribute("allow","autoplay; mute"),this.params.lazyloading&&t.setAttribute("loading","lazy"),t}generateSrcURL(t){let e="https://www.youtube.com/embed/";this.params["no-cookie"]&&(e="https://www.youtube-nocookie.com/embed/");let i=`${e}${t}?&enablejsapi=1&disablekb=1&controls=0&rel=0&iv_load_policy=3&cc_load_policy=0&playsinline=1&showinfo=0&modestbranding=1&fs=0`;return this.params.muted&&(i+="&mute=1"),this.params.autoplay&&this.params["always-play"]&&(i+="&autoplay=1"),this.params.loop&&(i+="&loop=1"),i}injectPlayer(){this.playerElement=this.generatePlayerElement(),this.src=this.generateSrcURL(this.id),this.playerElement.src=this.src,this.playerElement.id=this.uid,this.stylePlayerElement(this.playerElement),this.element.appendChild(this.playerElement),this.resize(this.playerElement)}setSource(t){const e=t.match(m);!e||!e.length||(this.id=e[1],this.src=this.generateSrcURL(this.id),this.playerElement.src=this.src,this.element.hasAttribute("data-vbg")&&this.element.setAttribute("data-vbg",this.src),this.element.hasAttribute("data-ytbg")&&this.element.setAttribute("data-ytbg",this.src),this.loadBackground(this.id))}onVideoTimeUpdate(){const t=this.player.getCurrentTime();t!==this.currentTime&&(this.currentTime=t,this.percentComplete=this.timeToPercentage(this.currentTime),this.duration&&this.currentTime>=this.duration&&(this.currentState="ended",this.dispatchEvent("video-background-state-change"),this.onVideoEnded()),this.dispatchEvent("video-background-time-update"))}onVideoPlayerReady(){this.mobileLowBatteryAutoplayHack(),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&(this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.player.playVideo()),this.setDuration(this.player.getDuration()),this.dispatchEvent("video-background-ready")}onVideoStateChange(t){this.currentState=this.convertState(t.data),this.currentState==="ended"&&this.onVideoEnded(),this.currentState==="notstarted"&&this.params.autoplay&&(this.seekTo(this.params["start-at"]),this.player.playVideo()),this.currentState==="playing"?(this.initialPlay||(this.initialPlay=!0,this.playerElement.style.opacity=1),this.duration||this.setDuration(this.player.getDuration()),this.dispatchEvent("video-background-play"),this.startTimeUpdateTimer()):(this.dispatchEvent("video-background-pause"),this.stopTimeUpdateTimer()),this.dispatchEvent("video-background-state-change")}onVideoEnded(){if(this.dispatchEvent("video-background-ended"),!this.params.loop)return this.player.pause();this.seekTo(this.params["start-at"]),this.player.playVideo()}seek(t){this.seekTo(this.percentageToTime(t),!0)}seekTo(t,e=!0){this.player.seekTo(t,e)}softPause(){!this.state.playing||!this.player||this.player.pauseVideo()}softPlay(){!this.state.playing||!this.player||this.player.playVideo()}play(){this.player&&(this.state.playing=!0,this.params["start-at"]&&this.player.getCurrentTime()<this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.player.playVideo())}pause(){this.state.playing=!1,this.player.pauseVideo()}unmute(){this.player&&(this.state.muted=!1,this.initialVolume||(this.initialVolume=!0,this.setVolume(this.params.volume)),this.player.unMute(),this.dispatchEvent("video-background-unmute"))}mute(){this.player&&(this.state.muted=!0,this.player.mute(),this.dispatchEvent("video-background-mute"))}setVolume(t){this.player&&(this.player.setVolume(t*100),this.dispatchEvent("video-background-volume-change"))}},g=class extends h{constructor(t,e,i,s){super(t,e,i,s,"vimeo"),i&&(this.is_mobile&&!this.params.mobile||(this.injectScript(),this.player=null,this.injectPlayer(),this.initVimeoPlayer()))}injectScript(){if(window.hasOwnProperty("Vimeo")||document.querySelector('script[src="https://player.vimeo.com/api/player.js"]'))return;const t=document.createElement("script");window.hasOwnProperty("onVimeoIframeAPIReady")&&typeof window.onVimeoIframeAPIReady=="function"&&t.addEventListener("load",()=>{window.onVimeoIframeAPIReady()}),t.src="https://player.vimeo.com/api/player.js";const e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}initVimeoPlayer(){!window.hasOwnProperty("Vimeo")||this.player!==null||(this.player=new Vimeo.Player(this.playerElement),this.player.on("loaded",this.onVideoPlayerReady.bind(this)),this.player.on("ended",this.onVideoEnded.bind(this)),this.player.on("play",this.onVideoPlay.bind(this)),this.player.on("pause",this.onVideoPause.bind(this)),this.player.on("bufferstart",this.onVideoBuffering.bind(this)),this.player.on("timeupdate",this.onVideoTimeUpdate.bind(this)),this.params.volume!==1&&!this.params.muted&&this.setVolume(this.params.volume))}generatePlayerElement(){const t=document.createElement("iframe");return t.setAttribute("frameborder",0),t.setAttribute("allow","autoplay; mute"),this.params.lazyloading&&t.setAttribute("loading","lazy"),t}generateSrcURL(t){let e="https://player.vimeo.com/video/"+t+"?background=1&controls=0";return this.params.muted&&(e+="&muted=1"),this.params.autoplay&&this.params["always-play"]&&(e+="&autoplay=1"),this.params.loop&&(e+="&loop=1&autopause=0"),this.params["no-cookie"]&&(e+="&dnt=1"),this.params["start-at"]&&(e+="#t="+this.params["start-at"]+"s"),e}injectPlayer(){this.playerElement=this.generatePlayerElement(),this.src=this.generateSrcURL(this.id),this.playerElement.src=this.src,this.playerElement.id=this.uid,this.stylePlayerElement(this.playerElement),this.element.appendChild(this.playerElement),this.resize(this.playerElement)}updateState(t){this.currentState=t,this.dispatchEvent("video-background-state-change")}setSource(t){const e=t.match(c);!e||!e.length||(this.id=e[1],this.src=this.generateSrcURL(this.id),this.playerElement.src=this.src,this.element.hasAttribute("data-vbg")&&this.element.setAttribute("data-vbg",this.src),this.element.hasAttribute("data-ytbg")&&this.element.setAttribute("data-ytbg",this.src),this.loadBackground(this.id))}onVideoPlayerReady(){this.mobileLowBatteryAutoplayHack(),this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&this.player.play(),this.player.getDuration().then(t=>{this.setDuration(t)}),this.dispatchEvent("video-background-ready")}onVideoEnded(){if(this.updateState("ended"),this.dispatchEvent("video-background-ended"),!this.params.loop)return this.pause();this.seekTo(this.params["start-at"]),this.updateState("playing"),this.dispatchEvent("video-background-play")}onVideoTimeUpdate(t){this.currentTime=t.seconds,this.percentComplete=this.timeToPercentage(t.seconds),this.dispatchEvent("video-background-time-update"),this.duration&&t.seconds>=this.duration&&this.onVideoEnded()}onVideoBuffering(){this.updateState("buffering")}onVideoPlay(t){this.initialPlay||(this.initialPlay=!0,this.playerElement.style.opacity=1),this.setDuration(t.duration);const e=t.seconds;self.params["start-at"]&&e<self.params["start-at"]&&self.seekTo(self.params["start-at"]),self.duration&&e>=self.duration&&self.seekTo(self.params["start-at"]),this.updateState("playing"),this.dispatchEvent("video-background-play")}onVideoPause(){this.updateState("paused"),this.dispatchEvent("video-background-pause")}seek(t){this.seekTo(this.percentageToTime(t))}seekTo(t){this.player.setCurrentTime(t)}softPause(){!this.state.playing||!this.player||this.player.pause()}softPlay(){!this.state.playing||!this.player||this.player.play()}play(){this.player&&(this.state.playing=!0,this.player.play())}pause(){this.player&&(this.state.playing=!1,this.player.pause())}unmute(){this.player&&(this.state.muted=!1,this.initialVolume||(this.initialVolume=!0,this.setVolume(this.params.volume)),this.player.setMuted(!1),this.dispatchEvent("video-background-unmute"))}mute(){this.player&&(this.state.muted=!0,this.player.setMuted(!0),this.dispatchEvent("video-background-mute"))}setVolume(t){this.player&&(this.player.setVolume(t),this.dispatchEvent("video-background-volume-change"))}},O=class extends h{constructor(t,e,i,s){super(t,e,i.link,s,"video"),!(!i||!i.link)&&(this.is_mobile&&!this.params.mobile||(this.src=i.link,this.ext=/(?:\.([^.]+))?$/.exec(i.id)[1],this.uid=s,this.element.setAttribute("data-vbg-uid",s),this.player=null,this.buttons={},this.MIME_MAP={ogv:"video/ogg",ogm:"video/ogg",ogg:"video/ogg",avi:"video/avi",mp4:"video/mp4",webm:"video/webm"},this.mime=this.MIME_MAP[this.ext.toLowerCase()],this.injectPlayer(),this.mobileLowBatteryAutoplayHack(),this.dispatchEvent("video-background-ready")))}generatePlayerElement(){const t=document.createElement("video");return t.toggleAttribute("playsinline",!0),t.toggleAttribute("loop",this.params.loop),t.toggleAttribute("autoplay",this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)),t.toggleAttribute("muted",this.params.muted),this.params.lazyloading&&t.setAttribute("loading","lazy"),t}injectPlayer(){this.player=this.generatePlayerElement(),this.playerElement=this.player,this.params.volume!==1&&!this.params.muted&&this.setVolume(this.params.volume),this.playerElement.setAttribute("id",this.uid),this.stylePlayerElement(this.playerElement),this.player.addEventListener("loadedmetadata",this.onVideoLoadedMetadata.bind(this)),this.player.addEventListener("durationchange",this.onVideoLoadedMetadata.bind(this)),this.player.addEventListener("canplay",this.onVideoCanPlay.bind(this)),this.player.addEventListener("timeupdate",this.onVideoTimeUpdate.bind(this)),this.player.addEventListener("play",this.onVideoPlay.bind(this)),this.player.addEventListener("pause",this.onVideoPause.bind(this)),this.player.addEventListener("waiting",this.onVideoBuffering.bind(this)),this.player.addEventListener("ended",this.onVideoEnded.bind(this)),this.element.appendChild(this.playerElement);const t=document.createElement("source");t.setAttribute("src",this.src),t.setAttribute("type",this.mime),this.playerElement.appendChild(t),this.resize(this.playerElement)}updateState(t){this.currentState=t,this.dispatchEvent("video-background-state-change")}setSource(t){const e=t.match(y);if(!e||!e.length)return;this.id=e[1],this.ext=/(?:\.([^.]+))?$/.exec(this.id)[1],this.mime=this.MIME_MAP[this.ext.toLowerCase()],this.playerElement.innerHTML="";const i=document.createElement("source");i.setAttribute("src",t),i.setAttribute("type",this.mime),this.playerElement.appendChild(i),this.src=t,this.element.hasAttribute("data-vbg")&&this.element.setAttribute("data-vbg",this.src),this.element.hasAttribute("data-ytbg")&&this.element.setAttribute("data-ytbg",this.src)}onVideoLoadedMetadata(){this.setDuration(this.player.duration)}onVideoCanPlay(){this.setDuration(this.player.duration),this.params["start-at"]&&this.params.autoplay&&this.seekTo(this.params["start-at"])}onVideoTimeUpdate(){this.currentTime=this.player.currentTime,this.percentComplete=this.timeToPercentage(this.player.currentTime),this.dispatchEvent("video-background-time-update"),this.currentTime>=this.duration&&this.onVideoEnded()}onVideoPlay(){this.initialPlay||(this.initialPlay=!0,this.playerElement.style.opacity=1),this.updateState("playing"),this.dispatchEvent("video-background-play")}onVideoPause(){this.updateState("paused"),this.dispatchEvent("video-background-pause")}onVideoEnded(){if(this.updateState("ended"),this.dispatchEvent("video-background-ended"),!this.params.loop)return this.pause();this.seekTo(this.params["start-at"]),this.onVideoPlay()}onVideoBuffering(){this.updateState("buffering")}seek(t){this.seekTo(this.percentageToTime(t))}seekTo(t){if(this.player.hasOwnProperty("fastSeek")){this.player.fastSeek(t);return}this.player.currentTime=t}softPause(){!this.state.playing||!this.player||this.player.pause()}softPlay(){!this.state.playing||!this.player||this.player.play()}play(){if(!this.player)return;const t=this.player.currentTime;this.params["start-at"]&&t<=this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.duration&&t>=this.duration&&this.seekTo(this.params["start-at"]),this.state.playing=!0,this.player.play()}pause(){this.player&&(this.state.playing=!1,this.player.pause())}unmute(){this.player&&(this.state.muted=!1,this.player.muted=!1,this.initialVolume||(this.initialVolume=!0,this.setVolume(this.params.volume)),this.dispatchEvent("video-background-unmute"))}mute(){this.player&&(this.state.muted=!0,this.player.muted=!0,this.dispatchEvent("video-background-mute"))}setVolume(t){this.player&&(this.player.volume=t,this.dispatchEvent("video-background-volume-change"))}},b=class{constructor(t,e){this.elements=t,this.elements instanceof Element&&(this.elements=[this.elements]),typeof this.elements=="string"&&(this.elements=document.querySelectorAll(t)),this.index={};const i=this;if(this.intersectionObserver=new IntersectionObserver(function(s){s.forEach(function(a){const r=a.target.getAttribute("data-vbg-uid");if(r&&i.index.hasOwnProperty(r)&&a.isIntersecting){i.index[r].isIntersecting=!0;try{i.index[r].player&&i.index[r].params.autoplay&&i.index[r].softPlay()}catch{}}else{i.index[r].isIntersecting=!1;try{i.index[r].player&&i.index[r].softPause()}catch{}}})}),this.resizeObserver=null,"ResizeObserver"in window?this.resizeObserver=new ResizeObserver(function(s){s.forEach(function(a){const r=a.target.getAttribute("data-vbg-uid");r&&i.index.hasOwnProperty(r)&&window.requestAnimationFrame(()=>i.index[r].resize())})}):window.addEventListener("resize",function(){for(let s in i.index)window.requestAnimationFrame(()=>i.index[s].resize(i.index[s].playerElement))}),this.initPlayers(),!(!this.elements||!this.elements.length))for(let s=0;s<this.elements.length;s++){const a=this.elements[s];this.add(a,e)}}add(t,e){const i=t.getAttribute("data-youtube")||t.getAttribute("data-vbg"),s=this.getVidID(i);if(!s)return;const a=this.generateUID(s.id);if(a){switch(s.type){case"YOUTUBE":const r=new f(t,e,s.id,a);this.index[a]=r;break;case"VIMEO":const n=new g(t,e,s.id,a);this.index[a]=n;break;case"VIDEO":const o=new O(t,e,s,a);this.index[a]=o;break}this.resizeObserver&&this.resizeObserver.observe(t),this.index[a].params["always-play"]||this.intersectionObserver.observe(t)}}destroy(t){const e=t.getAttribute("data-vbg-uid");e&&this.index.hasOwnProperty(e)&&(this.index[e].params["always-play"]||this.intersectionObserver.unobserve(t),this.resizeObserver&&this.resizeObserver.unobserve(t),this.index[e].destroy(),delete this.index[e])}getVidID(t){if(!(t===void 0&&t===null)){this.re={},this.re.YOUTUBE=m,this.re.VIMEO=c,this.re.VIDEO=y;for(let e in this.re){const i=t.match(this.re[e]);if(i&&i.length)return this.re[e].lastIndex=0,{id:i[1],type:e,regex_pts:i,link:t}}}}generateUID(t){t=t.replace(/[^a-zA-Z0-9\-_]/g,"-"),t=t.replace(/-{2,}/g,"-"),t=t.replace(/^-+/,"").replace(/-+$/,""),t="vbg-"+t;let e=t+"-"+u(0,9999);for(;this.index.hasOwnProperty(e);)e=t+"-"+u(0,9999);return e}get(t){const e=typeof t=="string"?t:t.getAttribute("data-vbg-uid");if(e&&this.index.hasOwnProperty(e))return this.index[e]}pauseVideos(){for(let t in this.index)this.index[t].pause()}playVideos(){for(let t in this.index)this.index[t].play()}initPlayers(t){const e=this;window.onYouTubeIframeAPIReady=function(){for(let i in e.index)e.index[i]instanceof f&&e.index[i].initYTPlayer();t&&setTimeout(t,100)},window.hasOwnProperty("YT")&&window.YT.loaded&&window.onYouTubeIframeAPIReady(),window.onVimeoIframeAPIReady=function(){for(let i in e.index)e.index[i]instanceof g&&e.index[i].initVimeoPlayer();t&&setTimeout(t,100)},window.hasOwnProperty("Vimeo")&&window.Vimeo.hasOwnProperty("Player")&&window.onVimeoIframeAPIReady()}},B=class{constructor(t,e){this.lock=!1,t&&(this.seekBarElem=t,this.progressElem=this.seekBarElem.querySelector(".js-seek-bar-progress"),this.inputElem=this.seekBarElem.querySelector(".js-seek-bar"),this.targetSelector=this.seekBarElem.getAttribute("data-target"),this.targetSelector&&(this.targetElem=document.querySelector(this.targetSelector),this.targetElem&&(e&&(this.vbgInstance=e),this.targetElem.addEventListener("video-background-time-update",this.onTimeUpdate.bind(this)),this.targetElem.addEventListener("video-background-play",this.onReady.bind(this)),this.targetElem.addEventListener("video-background-ready",this.onReady.bind(this)),this.inputElem.addEventListener("input",this.onInput.bind(this)),this.inputElem.addEventListener("change",this.onChange.bind(this)))))}onReady(t){this.vbgInstance=t.detail}onTimeUpdate(t){this.vbgInstance||(this.vbgInstance=t.detail),this.lock||requestAnimationFrame(()=>this.setProgress(this.vbgInstance.percentComplete))}onInput(t){this.lock=!0,requestAnimationFrame(()=>this.setProgress(t.target.value))}onChange(t){this.lock=!1,requestAnimationFrame(()=>this.setProgress(t.target.value)),this.vbgInstance&&(this.vbgInstance.seek(t.target.value),this.vbgInstance.playerElement&&this.vbgInstance.playerElement.style.opacity===0&&(this.vbgInstance.playerElement.style.opacity=1))}setProgress(t){this.progressElem&&(this.progressElem.value=t),this.inputElem&&(this.inputElem.value=t)}};typeof jQuery=="function"&&function(t){t.fn.youtube_background=function(e){const i=t(this);return window.hasOwnProperty("VIDEO_BACKGROUNDS")?(window.VIDEO_BACKGROUNDS.add(i,e),i):(window.VIDEO_BACKGROUNDS=new b(this,e),i)}}(jQuery),window.SeekBar=B,window.VideoBackgrounds=b})();
/* youtube-background v1.1.1 | https://github.com/stamat/youtube-background | MIT License */
(()=>{function l(t){t&&(t.element.classList.add(t.stateClassName),t.element.firstChild.classList.remove(t.stateChildClassNames[0]),t.element.firstChild.classList.add(t.stateChildClassNames[1]),t.element.setAttribute("aria-checked",!1))}function E(t){t&&(t.element.classList.remove(t.stateClassName),t.element.firstChild.classList.add(t.stateChildClassNames[0]),t.element.firstChild.classList.remove(t.stateChildClassNames[1]),t.element.setAttribute("aria-checked",!0))}function u(t,e){const i=document.createElement("button");i.className=e.className,i.innerHTML=e.innerHtml,i.setAttribute("role","switch"),i.firstChild.classList.add(e.stateChildClassNames[0]),i.setAttribute("aria-checked",!e.initialState),e.element=i,t.params[e.condition_parameter]===e.initialState&&l(e),i.addEventListener("click",function(s){this.classList.contains(e.stateClassName)?(E(e),t[e.actions[0]]()):(l(e),t[e.actions[1]]())}),t.buttons[e.name]={element:i,button_properties:e},t.controls_element.appendChild(i)}function w(t){if(/^\s*(true|false)\s*$/i.test(t))return t==="true"}function k(t){if(/^\s*\d+\s*$/.test(t))return parseInt(t);if(/^\s*[\d.]+\s*$/.test(t))return parseFloat(t)}function T(t){if(/^\s*\[.*\]\s*$/.test(t))try{return JSON.parse(t)}catch{}}function V(t){if(/^\s*\{.*\}\s*$/.test(t))try{return JSON.parse(t)}catch{}}function P(t){if(/^\s*\/.*\/g?i?\s*$/.test(t))try{return new RegExp(t)}catch{}}function A(t){if(/^\s*null\s*$/.test(t))return null;const e=w(t);return e!==void 0?e:k(t)||T(t)||V(t)||P(t)||t}function S(t){return Array.isArray(t)}function x(t){return typeof t=="string"}function d(t,e){return t>e&&([t,e]=[e,t]),t===e?t:(t=Math.ceil(t),e=Math.floor(e),Math.floor(Math.random()*(e-t+1))+t)}function I(t,e){return!t||!e||Number.isNaN(t)||Number.isNaN(e)?0:t/e*100}function C(t){const e=1.7777777778;if(!t||!t.length||/16[\:x\-\/]{1}9/i.test(t))return e;const i=t.split(/\s?[\:x\-\/]{1}\s?/i);if(i.length<2)return e;const s=parseInt(i[0]),a=parseInt(i[1]);return s===0||a===0||isNaN(s)||isNaN(a)?e:s/a}function p(t,e=document){if(t instanceof Array||t instanceof NodeList)return t;if(t instanceof Element)return[t];if(e instanceof Element||e instanceof Document)return e.querySelectorAll(t);if(x(e)&&(e=p(e)),!e instanceof Array&&!e instanceof NodeList)return[];const i=[];for(const s of e)i.push(...s.querySelectorAll(t));return i}function L(t,e=1,i=0){t instanceof Element&&(t=[t]),typeof t=="string"&&(t=p(t));for(const s of t){const a=s.parentNode.offsetHeight+i,r=s.parentNode.offsetWidth+i;e>r/a?(s.style.width=a*e+"px",s.style.height=a+"px"):(s.style.width=r+"px",s.style.height=r/e+"px")}}var m=/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i,c=/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|album\/(?:\d+)\/video\/|video\/|)(\d+)(?:[a-zA-Z0-9_\-]+)?/i,y=/\/([^\/]+\.(?:mp4|ogg|ogv|ogm|webm|avi))\s*$/i;function N(t){return/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(t)||/\b(Android|Windows Phone|iPad|iPod)\b/i.test(t)}function O(){return"maxTouchPoints"in navigator?navigator.maxTouchPoints>0:"matchMedia"in window?!!matchMedia("(pointer:coarse)").matches:"orientation"in window?!0:N(navigator.userAgent)}var h=class{constructor(t,e,i,s,a){if(!i)return;this.is_mobile=O(),this.type=a,this.id=i,this.element=t,this.playerElement=null,this.uid=s,this.element.setAttribute("data-vbg-uid",s),this.buttons={},this.isIntersecting=!1,this.playing=!1,this.muted=!1,this.currentState="notstarted",this.initialPlay=!1,this.initialVolume=!1,this.volume=1,this.params={};const r={pause:!1,"play-button":!1,"mute-button":!1,autoplay:!0,muted:!0,loop:!0,mobile:!0,"load-background":!1,resolution:"16:9","inline-styles":!0,"fit-box":!1,offset:100,"start-at":0,"end-at":0,poster:null,"always-play":!1,volume:1,"no-cookie":!0,"force-on-low-battery":!1,lazyloading:!1};this.params=this.parseProperties(e,r,this.element,["data-ytbg-","data-vbg-"]),this.params.pause&&(this.params["play-button"]=this.params.pause),this.params.resolution_mod=C(this.params.resolution),this.playing=this.params.autoplay,this.muted=this.params.muted,this.volume=this.params.volume,this.currentTime=this.params["start-at"]||0,this.duration=this.params["end-at"]||0,this.percentComplete=0,this.params["start-at"]&&(this.percentComplete=this.timeToPercentage(this.params["start-at"])),this.buildWrapperHTML(),!(this.is_mobile&&!this.params.mobile)&&(this.params["play-button"]&&u(this,{name:"playing",className:"play-toggle",innerHtml:'<i class="fa"></i>',initialState:!this.playing,stateClassName:"paused",condition_parameter:"autoplay",stateChildClassNames:["fa-pause-circle","fa-play-circle"],actions:["play","pause"]}),this.params["mute-button"]&&u(this,{name:"muted",className:"mute-toggle",innerHtml:'<i class="fa"></i>',initialState:this.muted,stateClassName:"muted",condition_parameter:"muted",stateChildClassNames:["fa-volume-up","fa-volume-mute"],actions:["unmute","mute"]}))}timeToPercentage(t){if(t<=this.params["start-at"])return 0;if(t>=this.duration)return 100;if(t<=0)return 0;t-=this.params["start-at"];const e=this.duration-this.params["start-at"];return I(t,e)}percentageToTime(t){if(!this.duration)return 0;if(t>100)return this.duration;if(t<0)return 0;const e=this.duration-this.params["start-at"];let i=t*e/100;return this.params["start-at"]&&(i+=this.params["start-at"]),i}resize(t){this.params["fit-box"]||L(t||this.playerElement,this.params.resolution_mod,this.params.offset),this.dispatchEvent("video-background-resize")}stylePlayerElement(t){t&&(this.params["inline-styles"]&&(t.style.top="50%",t.style.left="50%",t.style.transform="translateX(-50%) translateY(-50%)",t.style.position="absolute",t.style.opacity=0),this.params["fit-box"]&&(t.style.width="100%",t.style.height="100%"))}buildWrapperHTML(){const t=this.element.parentNode;this.element.classList.add("youtube-background","video-background");const e={height:"100%",width:"100%","z-index":"0",position:"absolute",overflow:"hidden",top:0,left:0,bottom:0,right:0};if(this.params["mute-button"]||(e["pointer-events"]="none"),(this.params["load-background"]||this.params.poster)&&(this.loadBackground(this.id),this.params.poster&&(e["background-image"]=this.params.poster),e["background-size"]="cover",e["background-repeat"]="no-repeat",e["background-position"]="center"),this.params["inline-styles"]){for(let i in e)this.element.style[i]=e[i];["absolute","fixed","relative","sticky"].indexOf(t.style.position)||(t.style.position="relative")}if(this.params["play-button"]||this.params["mute-button"]){const i=document.createElement("div");i.className="video-background-controls",i.style.position="absolute",i.style.top="10px",i.style.right="10px",i.style["z-index"]=2,this.controls_element=i,t.appendChild(i)}return this.element}loadBackground(t){this.params["load-background"],t&&(this.type==="youtube"&&(this.element.style["background-image"]=`url(https://img.youtube.com/vi/${t}/hqdefault.jpg)`),this.type==="vimeo"&&(this.element.style["background-image"]=`url(https://vumbnail.com/${t}.jpg)`))}destroy(){this.playerElement.remove(),this.element.classList.remove("youtube-background","video-background"),this.element.removeAttribute("data-vbg-uid"),this.element.style="",(this.params["play-button"]||this.params["mute-button"])&&this.controls_element.remove(),this.timeUpdateTimer&&clearInterval(this.timeUpdateTimer),this.dispatchEvent("video-background-destroyed")}setDuration(t){if(this.duration!==t){if(this.params["end-at"]){if(t>this.params["end-at"]){this.duration=this.params["end-at"];return}if(t<this.params["end-at"]){this.duration=t;return}}else{this.duration=t;return}t<=0&&(this.duration=this.params["end-at"])}}setStartAt(t){this.params["start-at"]=t}setEndAt(t){this.params["end-at"]=t,this.duration>t&&(this.duration=t),this.currentTime>t&&this.onVideoEnded()}dispatchEvent(t){this.element.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:this}))}mobileLowBatteryAutoplayHack(){this.params["force-on-low-battery"]&&(!this.is_mobile&&this.params.mobile||document.addEventListener("touchstart",()=>{!this.initialPlay&&this.params.autoplay&&this.params.muted&&(this.softPlay(),!this.isIntersecting&&!this.params["always-play"]&&this.softPause())},{once:!0}))}parseProperties(t,e,i,s){let a={};if(!t)a=e;else for(let r in e)a[r]=t.hasOwnProperty(r)?t[r]:e[r];if(!i)return a;for(let r in a){let n;if(S(s))for(let o=0;o<s.length;o++){const v=i.getAttribute(s[o]+r);if(v){n=v;break}}else n=i.getAttribute(s+r);n!=null&&(a[r]=A(n))}return a}},f=class extends h{constructor(t,e,i,s){super(t,e,i,s,"youtube"),i&&(this.is_mobile&&!this.params.mobile||(this.injectScript(),this.player=null,this.injectPlayer(),this.STATES={"-1":"notstarted",0:"ended",1:"playing",2:"paused",3:"buffering",5:"cued"},this.timeUpdateTimer=null,this.timeUpdateInterval=250,this.initYTPlayer()))}startTimeUpdateTimer(){this.timeUpdateTimer||(this.timeUpdateTimer=setInterval(this.onVideoTimeUpdate.bind(this),this.timeUpdateInterval))}stopTimeUpdateTimer(){clearInterval(this.timeUpdateTimer),this.timeUpdateTimer=null}convertState(t){return this.STATES[t]}initYTPlayer(){!window.hasOwnProperty("YT")||this.player!==null||(this.player=new YT.Player(this.uid,{events:{onReady:this.onVideoPlayerReady.bind(this),onStateChange:this.onVideoStateChange.bind(this)}}),this.volume!==1&&!this.muted&&this.setVolume(this.volume))}injectScript(){if(window.hasOwnProperty("YT")||document.querySelector('script[src="https://www.youtube.com/player_api"]'))return;const t=document.createElement("script");t.src="https://www.youtube.com/player_api";const e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}generatePlayerElement(){const t=document.createElement("iframe");return t.setAttribute("frameborder",0),t.setAttribute("allow","autoplay; mute"),this.params.lazyloading&&t.setAttribute("loading","lazy"),t}generateSrcURL(t){let e="https://www.youtube.com/embed/";this.params["no-cookie"]&&(e="https://www.youtube-nocookie.com/embed/");let i=`${e}${t}?&enablejsapi=1&disablekb=1&controls=0&rel=0&iv_load_policy=3&cc_load_policy=0&playsinline=1&showinfo=0&modestbranding=1&fs=0`;return this.params.muted&&(i+="&mute=1"),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&(i+="&autoplay=1"),this.params.loop&&(i+="&loop=1"),i}injectPlayer(){this.playerElement=this.generatePlayerElement(),this.src=this.generateSrcURL(this.id),this.playerElement.src=this.src,this.playerElement.id=this.uid,this.stylePlayerElement(this.playerElement),this.element.appendChild(this.playerElement),this.resize(this.playerElement)}setSource(t){const e=t.match(m);!e||!e.length||(this.id=e[1],this.src=this.generateSrcURL(this.id),this.playerElement.src=this.src,this.element.hasAttribute("data-vbg")&&this.element.setAttribute("data-vbg",this.src),this.element.hasAttribute("data-ytbg")&&this.element.setAttribute("data-ytbg",this.src),this.loadBackground(this.id))}onVideoTimeUpdate(){const t=this.player.getCurrentTime();t!==this.currentTime&&(this.currentTime=t,this.percentComplete=this.timeToPercentage(this.currentTime),this.duration&&this.currentTime>=this.duration&&(this.currentState="ended",this.dispatchEvent("video-background-state-change"),this.onVideoEnded()),this.dispatchEvent("video-background-time-update"))}onVideoPlayerReady(){this.mobileLowBatteryAutoplayHack(),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&(this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.player.playVideo()),this.setDuration(this.player.getDuration()),this.dispatchEvent("video-background-ready")}onVideoStateChange(t){this.currentState=this.convertState(t.data),this.currentState==="ended"&&this.onVideoEnded(),this.currentState==="notstarted"&&this.params.autoplay&&(this.seekTo(this.params["start-at"]),this.player.playVideo()),this.currentState==="playing"?(this.initialPlay||(this.initialPlay=!0,this.playerElement.style.opacity=1),this.duration||this.setDuration(this.player.getDuration()),this.dispatchEvent("video-background-play"),this.startTimeUpdateTimer()):(this.dispatchEvent("video-background-pause"),this.stopTimeUpdateTimer()),this.dispatchEvent("video-background-state-change")}onVideoEnded(){if(this.dispatchEvent("video-background-ended"),!this.params.loop)return this.player.pause();this.seekTo(this.params["start-at"]),this.player.playVideo()}seek(t){this.seekTo(this.percentageToTime(t),!0)}seekTo(t,e=!0){this.player.seekTo(t,e)}softPause(){!this.playing||!this.player||this.player.pauseVideo()}softPlay(){!this.playing||!this.player||this.player.playVideo()}play(){this.player&&(this.playing=!0,this.params["start-at"]&&this.player.getCurrentTime()<this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.player.playVideo())}pause(){this.playing=!1,this.player.pauseVideo()}unmute(){this.player&&(this.muted=!1,this.initialVolume||(this.initialVolume=!0,this.setVolume(this.params.volume)),this.player.unMute(),this.dispatchEvent("video-background-unmute"))}mute(){this.player&&(this.muted=!0,this.player.mute(),this.dispatchEvent("video-background-mute"))}getVolume(){if(this.player)return this.player.getVolume()/100}setVolume(t){this.player&&(this.volume=t,this.player.setVolume(t*100),this.dispatchEvent("video-background-volume-change"))}},g=class extends h{constructor(t,e,i,s){super(t,e,i,s,"vimeo"),i&&(this.is_mobile&&!this.params.mobile||(this.injectScript(),this.player=null,this.injectPlayer(),this.initVimeoPlayer()))}injectScript(){if(window.hasOwnProperty("Vimeo")||document.querySelector('script[src="https://player.vimeo.com/api/player.js"]'))return;const t=document.createElement("script");window.hasOwnProperty("onVimeoIframeAPIReady")&&typeof window.onVimeoIframeAPIReady=="function"&&t.addEventListener("load",()=>{window.onVimeoIframeAPIReady()}),t.src="https://player.vimeo.com/api/player.js";const e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}initVimeoPlayer(){!window.hasOwnProperty("Vimeo")||this.player!==null||(this.player=new Vimeo.Player(this.playerElement),this.player.on("loaded",this.onVideoPlayerReady.bind(this)),this.player.on("ended",this.onVideoEnded.bind(this)),this.player.on("play",this.onVideoPlay.bind(this)),this.player.on("pause",this.onVideoPause.bind(this)),this.player.on("bufferstart",this.onVideoBuffering.bind(this)),this.player.on("timeupdate",this.onVideoTimeUpdate.bind(this)),this.volume!==1&&!this.muted&&this.setVolume(this.volume))}generatePlayerElement(){const t=document.createElement("iframe");return t.setAttribute("frameborder",0),t.setAttribute("allow","autoplay; mute"),this.params.lazyloading&&t.setAttribute("loading","lazy"),t}generateSrcURL(t){let e="https://player.vimeo.com/video/"+t+"?background=1&controls=0";return this.params.muted&&(e+="&muted=1"),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&(e+="&autoplay=1"),this.params.loop&&(e+="&loop=1&autopause=0"),this.params["no-cookie"]&&(e+="&dnt=1"),this.params["start-at"]&&(e+="#t="+this.params["start-at"]+"s"),e}injectPlayer(){this.playerElement=this.generatePlayerElement(),this.src=this.generateSrcURL(this.id),this.playerElement.src=this.src,this.playerElement.id=this.uid,this.stylePlayerElement(this.playerElement),this.element.appendChild(this.playerElement),this.resize(this.playerElement)}updateState(t){this.currentState=t,this.dispatchEvent("video-background-state-change")}setSource(t){const e=t.match(c);!e||!e.length||(this.id=e[1],this.src=this.generateSrcURL(this.id),this.playerElement.src=this.src,this.element.hasAttribute("data-vbg")&&this.element.setAttribute("data-vbg",this.src),this.element.hasAttribute("data-ytbg")&&this.element.setAttribute("data-ytbg",this.src),this.loadBackground(this.id))}onVideoPlayerReady(){this.mobileLowBatteryAutoplayHack(),this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&this.player.play(),this.player.getDuration().then(t=>{this.setDuration(t)}),this.dispatchEvent("video-background-ready")}onVideoEnded(){if(this.updateState("ended"),this.dispatchEvent("video-background-ended"),!this.params.loop)return this.pause();this.seekTo(this.params["start-at"]),this.updateState("playing"),this.dispatchEvent("video-background-play")}onVideoTimeUpdate(t){this.currentTime=t.seconds,this.percentComplete=this.timeToPercentage(t.seconds),this.dispatchEvent("video-background-time-update"),this.duration&&t.seconds>=this.duration&&this.onVideoEnded()}onVideoBuffering(){this.updateState("buffering")}onVideoPlay(t){this.initialPlay||(this.initialPlay=!0,this.playerElement.style.opacity=1),this.setDuration(t.duration);const e=t.seconds;self.params["start-at"]&&e<self.params["start-at"]&&self.seekTo(self.params["start-at"]),self.duration&&e>=self.duration&&self.seekTo(self.params["start-at"]),this.updateState("playing"),this.dispatchEvent("video-background-play")}onVideoPause(){this.updateState("paused"),this.dispatchEvent("video-background-pause")}seek(t){this.seekTo(this.percentageToTime(t))}seekTo(t){this.player.setCurrentTime(t)}softPause(){!this.playing||!this.player||this.player.pause()}softPlay(){!this.playing||!this.player||this.player.play()}play(){this.player&&(this.playing=!0,this.player.play())}pause(){this.player&&(this.playing=!1,this.player.pause())}unmute(){this.player&&(this.muted=!1,this.initialVolume||(this.initialVolume=!0,this.setVolume(this.params.volume)),this.player.setMuted(!1),this.dispatchEvent("video-background-unmute"))}mute(){this.player&&(this.muted=!0,this.player.setMuted(!0),this.dispatchEvent("video-background-mute"))}getVolume(){if(this.player)return this.player.getVolume()}setVolume(t){this.player&&(this.volume=t,this.player.setVolume(t),this.dispatchEvent("video-background-volume-change"))}},U=class extends h{constructor(t,e,i,s){super(t,e,i.link,s,"video"),!(!i||!i.link)&&(this.is_mobile&&!this.params.mobile||(this.src=i.link,this.ext=/(?:\.([^.]+))?$/.exec(i.id)[1],this.uid=s,this.element.setAttribute("data-vbg-uid",s),this.player=null,this.buttons={},this.MIME_MAP={ogv:"video/ogg",ogm:"video/ogg",ogg:"video/ogg",avi:"video/avi",mp4:"video/mp4",webm:"video/webm"},this.mime=this.MIME_MAP[this.ext.toLowerCase()],this.injectPlayer(),this.mobileLowBatteryAutoplayHack(),this.dispatchEvent("video-background-ready")))}generatePlayerElement(){const t=document.createElement("video");return t.setAttribute("playsinline",""),this.params.loop&&t.setAttribute("loop",""),this.params.autoplay&&(this.params["always-play"]||this.isIntersecting)&&t.setAttribute("autoplay",""),this.muted&&t.setAttribute("muted",""),this.params.lazyloading&&t.setAttribute("loading","lazy"),t}injectPlayer(){this.player=this.generatePlayerElement(),this.playerElement=this.player,this.volume!==1&&!this.muted&&this.setVolume(this.volume),this.playerElement.setAttribute("id",this.uid),this.stylePlayerElement(this.playerElement),this.player.addEventListener("loadedmetadata",this.onVideoLoadedMetadata.bind(this)),this.player.addEventListener("durationchange",this.onVideoLoadedMetadata.bind(this)),this.player.addEventListener("canplay",this.onVideoCanPlay.bind(this)),this.player.addEventListener("timeupdate",this.onVideoTimeUpdate.bind(this)),this.player.addEventListener("play",this.onVideoPlay.bind(this)),this.player.addEventListener("pause",this.onVideoPause.bind(this)),this.player.addEventListener("waiting",this.onVideoBuffering.bind(this)),this.player.addEventListener("ended",this.onVideoEnded.bind(this)),this.element.appendChild(this.playerElement);const t=document.createElement("source");t.setAttribute("src",this.src),t.setAttribute("type",this.mime),this.playerElement.appendChild(t),this.resize(this.playerElement)}updateState(t){this.currentState=t,this.dispatchEvent("video-background-state-change")}setSource(t){const e=t.match(y);if(!e||!e.length)return;this.id=e[1],this.ext=/(?:\.([^.]+))?$/.exec(this.id)[1],this.mime=this.MIME_MAP[this.ext.toLowerCase()],this.playerElement.innerHTML="";const i=document.createElement("source");i.setAttribute("src",t),i.setAttribute("type",this.mime),this.playerElement.appendChild(i),this.src=t,this.element.hasAttribute("data-vbg")&&this.element.setAttribute("data-vbg",this.src),this.element.hasAttribute("data-ytbg")&&this.element.setAttribute("data-ytbg",this.src)}onVideoLoadedMetadata(){this.setDuration(this.player.duration)}onVideoCanPlay(){this.setDuration(this.player.duration),this.params["start-at"]&&this.params.autoplay&&this.seekTo(this.params["start-at"])}onVideoTimeUpdate(){this.currentTime=this.player.currentTime,this.percentComplete=this.timeToPercentage(this.player.currentTime),this.dispatchEvent("video-background-time-update"),this.currentTime>=this.duration&&this.onVideoEnded()}onVideoPlay(){this.initialPlay||(this.initialPlay=!0,this.playerElement.style.opacity=1),this.updateState("playing"),this.dispatchEvent("video-background-play")}onVideoPause(){this.updateState("paused"),this.dispatchEvent("video-background-pause")}onVideoEnded(){if(this.updateState("ended"),this.dispatchEvent("video-background-ended"),!this.params.loop)return this.pause();this.seekTo(this.params["start-at"]),this.onVideoPlay()}onVideoBuffering(){this.updateState("buffering")}seek(t){this.seekTo(this.percentageToTime(t))}seekTo(t){if(this.player.hasOwnProperty("fastSeek")){this.player.fastSeek(t);return}this.player.currentTime=t}softPause(){!this.playing||!this.player||this.player.pause()}softPlay(){!this.playing||!this.player||this.player.play()}play(){if(!this.player)return;const t=this.player.currentTime;this.params["start-at"]&&t<=this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.duration&&t>=this.duration&&this.seekTo(this.params["start-at"]),this.playing=!0,this.player.play()}pause(){this.player&&(this.playing=!1,this.player.pause())}unmute(){this.player&&(this.muted=!1,this.player.muted=!1,this.initialVolume||(this.initialVolume=!0,this.setVolume(this.params.volume)),this.dispatchEvent("video-background-unmute"))}mute(){this.player&&(this.muted=!0,this.player.muted=!0,this.dispatchEvent("video-background-mute"))}getVolume(){if(this.player)return this.player.volume}setVolume(t){this.player&&(this.volume=t,this.player.volume=t,this.dispatchEvent("video-background-volume-change"))}},b=class{constructor(t,e){this.elements=t,this.elements instanceof Element&&(this.elements=[this.elements]),typeof this.elements=="string"&&(this.elements=document.querySelectorAll(t)),this.index={};const i=this;if(this.intersectionObserver=null,"IntersectionObserver"in window&&(this.intersectionObserver=new IntersectionObserver(function(s){s.forEach(function(a){const r=a.target.getAttribute("data-vbg-uid");if(r&&i.index.hasOwnProperty(r)&&a.isIntersecting){i.index[r].isIntersecting=!0;try{i.index[r].player&&i.index[r].params.autoplay&&i.index[r].softPlay()}catch{}}else{i.index[r].isIntersecting=!1;try{i.index[r].player&&i.index[r].softPause()}catch{}}})})),this.resizeObserver=null,"ResizeObserver"in window?this.resizeObserver=new ResizeObserver(function(s){s.forEach(function(a){const r=a.target.getAttribute("data-vbg-uid");r&&i.index.hasOwnProperty(r)&&window.requestAnimationFrame(()=>i.index[r].resize())})}):window.addEventListener("resize",function(){for(let s in i.index)window.requestAnimationFrame(()=>i.index[s].resize(i.index[s].playerElement))}),this.initPlayers(),!(!this.elements||!this.elements.length))for(let s=0;s<this.elements.length;s++){const a=this.elements[s];this.add(a,e)}}add(t,e){if(!t||t.hasAttribute("data-vbg-uid"))return;this.intersectionObserver||(e||(e={}),e["always-play"]=!0);const i=t.getAttribute("data-youtube")||t.getAttribute("data-vbg"),s=this.getVidID(i);if(!s)return;const a=this.generateUID(s.id);if(a){switch(s.type){case"YOUTUBE":const r=new f(t,e,s.id,a);this.index[a]=r;break;case"VIMEO":const n=new g(t,e,s.id,a);this.index[a]=n;break;case"VIDEO":const o=new U(t,e,s,a);this.index[a]=o;break}this.resizeObserver&&this.resizeObserver.observe(t),!this.index[a].params["always-play"]&&this.intersectionObserver&&this.intersectionObserver.observe(t)}}destroy(t){const e=t.uid||t.getAttribute("data-vbg-uid");e&&this.index.hasOwnProperty(e)&&(!this.index[e].params["always-play"]&&this.intersectionObserver&&this.intersectionObserver.unobserve(t),this.resizeObserver&&this.resizeObserver.unobserve(t),this.index[e].destroy(),delete this.index[e])}destroyAll(){for(let t in this.index)this.destroy(this.index[t].playerElement)}getVidID(t){if(!(t===void 0&&t===null)){this.re={},this.re.YOUTUBE=m,this.re.VIMEO=c,this.re.VIDEO=y;for(let e in this.re){const i=t.match(this.re[e]);if(i&&i.length)return this.re[e].lastIndex=0,{id:i[1],type:e,regex_pts:i,link:t}}}}generateUID(t){t=t.replace(/[^a-zA-Z0-9\-_]/g,"-"),t=t.replace(/-{2,}/g,"-"),t=t.replace(/^-+/,"").replace(/-+$/,""),t="vbg-"+t;let e=t+"-"+d(0,9999);for(;this.index.hasOwnProperty(e);)e=t+"-"+d(0,9999);return e}get(t){const e=typeof t=="string"?t:t.getAttribute("data-vbg-uid");if(e&&this.index.hasOwnProperty(e))return this.index[e]}pauseAll(){for(let t in this.index)this.index[t].pause()}playAll(){for(let t in this.index)this.index[t].play()}muteAll(){for(let t in this.index)this.index[t].mute()}unmuteAll(){for(let t in this.index)this.index[t].unmute()}setVolumeAll(t){for(let e in this.index)this.index[e].setVolume(t)}initPlayers(t){const e=this;window.onYouTubeIframeAPIReady=function(){for(let i in e.index)e.index[i]instanceof f&&e.index[i].initYTPlayer();t&&setTimeout(t,100)},window.hasOwnProperty("YT")&&window.YT.loaded&&window.onYouTubeIframeAPIReady(),window.onVimeoIframeAPIReady=function(){for(let i in e.index)e.index[i]instanceof g&&e.index[i].initVimeoPlayer();t&&setTimeout(t,100)},window.hasOwnProperty("Vimeo")&&window.Vimeo.hasOwnProperty("Player")&&window.onVimeoIframeAPIReady()}};typeof jQuery=="function"&&function(t){t.fn.youtube_background=function(e){const i=t(this);return window.hasOwnProperty("VIDEO_BACKGROUNDS")?(window.VIDEO_BACKGROUNDS.add(i,e),i):(window.VIDEO_BACKGROUNDS=new b(this,e),i)}}(jQuery),window.VideoBackgrounds=b})();

4

package.json
{
"name": "youtube-background",
"version": "1.1.0",
"description": "Simple JS plugin for embedding YouTube, Vimeo and HTML5 videos as a cover background",
"version": "1.1.1",
"description": "ESM / jQuery plugin for creating video backgrounds from YouTube, Vimeo or video file links.",
"main": "jquery.youtube-background.js",

@@ -6,0 +6,0 @@ "homepage": "https://github.com/stamat/youtube-background",

354

README.md

@@ -5,23 +5,50 @@ # 📺 youtube-background

~~Another 100 liner in a form of a~~ simple script (or jQuery plugin) to facilitate YouTube embeds as a cover background using YouTube Embed API.
> Create video backgrounds from a YouTube, Vimeo or video file links.
I wrote this code several times over the years and never bothered to make it reusable. Now when I needed it again I could not even find where I wrote it last...
**⚠️ Future development will be moved to [stamat/video-backgrounds](https://github.com/stamat/video-backgrounds).** Support will still be provided for this repo.
Goodbye careless days... I'm getting old...
[DEMO HERE ➡️](http://stamat.github.io/youtube-background/)
This project started as a simple 100 liner jQuery plugin for YouTube video backgrounds. The idea behind it was to have a straightforward minimal way to add a YouTube video as a background for a div, or any other HTML element. It was intended to be used on hero and banner elements mostly. You would add a data attribute `data-vbg` to the element, and the script would take care of the rest, no CSS required.
**Vanilla**
```html
<div data-vbg="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>
<script type="text/javascript">
const videoBackgrounds = new VideoBackgrounds('[data-vbg]');
</script>
```
**jQuery**
```html
<div data-vbg="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('[data-vbg]').youtube_background();
const videoBackgrounds = VIDEO_BACKGROUNDS;
});
</script>
```
Since it's creation it has evolved to support Vimeo and video files as well. Numerous features were added out of necessity on other projects or by community requests.
After numerous iterations and is now a fully fledged ES module that can be used with or without jQuery. It is also available as a standalone script.
## Features
* Play/Pause button
* Mute/Unmute button
* Video will pause when not visible
* No CSS required
* No longer jQuery dependant
* **No CSS required** - the script takes care of everything
* **YouTube**, **Vimeo** and **video files** support
* **jQuery** plugin and **ESM** module
* **Lazyloading** - lazyload the iframe/video
* YouTube and Vimeo **cookies** are disabled by default
* YouTube and Vimeo player API scrips are loaded only when needed
## Installation
### As a JS module
### As a ESM module
To install the package from NPM run the good old command
To install the package from NPM run:
```

@@ -31,3 +58,3 @@ npm install youtube-background

To import it in your script add:
Then import the script just like any other ESM module (if your bundler supports resolving `node_modules`, your import will look like this, otherwise you'll have to provide the full path to the script):

@@ -38,6 +65,4 @@ ```

Don't forget to point your bundler to use `node_modules` as an include path.
If you are using a bundler and you wish to use this script as a jQuery plugin, don't forget to import jQuery too.
If you wish to use it as a jQuery plugin, make sure you import jQuery as well.
### Over CDN

@@ -55,32 +80,172 @@

Usage is pretty simple, add a data attribute **data-vbg** containing a full YouTube, Vimeo or video file link or just the YouTube or Vimeo ID.
There are two ways to use this script: vanilla implementation or as a jQuery plugin.
You can trigger all elements containing the noted attribute with `$("[data-vbg]").youtube_background();`, or specify your selector, on jQuery document ready event.
### Vanilla Way
**As of version 1.0.6 jQuery is no longer a dependency**, but purely optional. To initialize video backgrounds without jQuery use the global class: `new VideoBackgrounds('[data-vbg]');`.
**Note:** From version 1.0.6 **jQuery is no longer a dependency**, but purely optional. To initialise youtube video backgrounds without jQuery use: `new VideoBackgrounds('[data-vbg]');`.
```html
<div data-vbg="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>
```
P.S. *https://www.youtube.com/player_api* is injected automatically, only once per script init. I've seen some implementations like Elementor WP plugin that inject it several times, for no reason. Anyway, you're welcome.
```javascript
import VideoBackgrounds from 'youtube-background'; // or if you are loading it from CDN as a standalone script, you can use the global variable `VideoBackgrounds`
### Quick Example
const videoBackgrounds = new VideoBackgrounds('[data-vbg]');
```
`VideoBackgrounds` is a factory class - this means that it is used to create and index multiple instances of the video backgrounds depending on the link type: YouTube, Vimeo or video file. It accepts a selector as a parameter and properties object that will be applied to all of the instances queried by the selector. For the list of available properties, please refer to the [Properties](#properties) section.
In order to programmatically add a new element to the factory instance and initialize the video background, for instance on an async event. You can use the `add` function of the factory instance, which accepts the element object and the optional properties object. For the list of available properties, please refer to the [Properties](#properties) section.
```javascript
// get the first element
const firstElement = document.querySelector('[data-vbg]');
// add the element to the factory instance
videoBackgrounds.add(firstElement);
```
In order to automatically initialize video backgrounds on all elements that match the selector as they appear in the DOM, you will have to implement MutationObserver manually.
The factory instance also indexes all of the individual video background instances by generated UID in it's property `index`, so you can access them later on if you need to.
UID is assigned to all target elements as a `data-vbg-uid` attribute when the video background is initialized. You can get the instance of the element by using a `get` function of the factory instance, which accepts the UID string or element object with UID attribute.
```javascript
// get the first element
const firstElement = document.querySelector('[data-vbg]');
// get the first instance instance by UID
const firstInstance = videoBackgrounds.get(firstElement);
```
You can programmatically control the video playing in the background regardless of the provider and access all of it's properties via the instance object.
```javascript
// true if the video is playing, false if the video is not playing
console.log(firstInstance.playing);
// true if video is muted, false if video is not muted
console.log(firstInstance.muted);
// true if the video is intersecting the viewport, false if the video is not intersecting the viewport.
console.log(firstInstance.isIntersecting);
// current state of the video
console.log(firstInstance.currentState);
// current time of the video in seconds
console.log(firstInstance.currentTime);
// percentage of the video that has been played
console.log(firstInstance.percentComplete);
// the element that the video background is attached to. `firstElement` from the above example
console.log(firstInstance.element);
// the element of the video player, meaning either an iframe in case of YouTube and Vimeo, or a video element
console.log(firstInstance.playerElement);
// the video player object, meaning either a YouTube or Vimeo player object, or a video element in case of HTML5 video
console.log(firstInstance.player);
// the type of the video, can be `youtube`, `vimeo` or `video`
console.log(firstInstance.type)
// volume of the video from 0 to 1
console.log(firstInstance.volume);
// play the video
firstInstance.play();
// pause the video
firstInstance.pause();
// mute the video
firstInstance.mute();
// unmute the video
firstInstance.unmute();
// set the video source
firstInstance.setSource('https://www.youtube.com/watch?v=eEpEeyqGlxA');
// set the video volume
firstInstance.setVolume(0.5);
// volume of the video from 0 to 1, or in case of Vimeo a promise that resolves to the volume value
firstInstance.getVolume();
// seek the video to a specific percentage complete
firstInstance.seek(25);
// seek the video to a specific time in seconds
firstInstance.seekTo(1.25);
// set Start At seconds
firstInstance.setStartAt(10);
// set End At in seconds
firstInstance.setEndAt(20);
```
If you wish to tune to the videos events, you can add listeners to the element that you've initialized the video background on. In `event.detail` you will get the instance object of the video background. Do refer to the [Events](#events) section for the list of all events.
```javascript
firstElement.addEventListener('video-background-ready', function(event) {
console.log('video-background-ready'); // the video instance object
console.log(event.detail); // the video instance object
})
```
In order to destroy the video background instance and revert the element to it's pre-initialization state, you can use the `destroy` function of the factory instance.
```javascript
// destroy the video background by providing the element
videoBackgrounds.destroy(firstElement);
// or by providing the instance videoBackground.destroy(firstInstance);
```
To destroy all the instances in the index you can use `destroyAll` function of the factory instance.
Factory instance also implements the `IntersectionObserver` out of the box to keep track of the visible video backgrounds in order to toggle their play/pause state and preserve the bandwidth and improve the performance. You can find the instance of the `IntersectionObserver` in the `intersectionObserver` property of the factory instance.
For the resize events, the factory instance implements the `ResizeObserver` out of the box. You can find the instance of the `ResizeObserver` in the `resizeObserver` property of the factory instance. If the `resizeObserver` is not supported, the factory instance will fallback to the `window` resize event.
### jQuery Way
jQuery is no longer a dependency, but purely optional. To initialize video backgrounds with jQuery use the global function: `jQuery('[data-vbg]').youtube_background();`.
```html
<style>
/* optional css fade in animation */
iframe {
transition: opacity 500ms ease-in-out;
transition-delay: 250ms;
}
</style>
<!-- target element -->
<div data-vbg="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>
```
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('[data-vbg]').youtube_background();
```javascript
jQuery(document).ready(function() {
jQuery('[data-vbg]').youtube_background();
});
```
This function does exactly the same thing as if you would initialize the ES6 factory class. It will pass the selected elements and initialize the factory class in the global variable `VIDEO_BACKGROUNDS`. So everything that applies for the factory instance in the ES6 guide applies to this instance.
```javascript
// get the first element
const firstElement = $('[data-vbg]')[0];
// get the first instance instance by UID
const firstInstance = VIDEO_BACKGROUNDS.get(firstElement);
```
The plugin method accepts properties object as a parameter. For the list of available properties, please refer to the next [Properties](#properties) section.
```javascript
jQuery(document).ready(function() {
jQuery('[data-vbg]').youtube_background({
'play-button': true
});
</script>
});
```
### Properties
## Properties

@@ -132,4 +297,7 @@ Property | Default | Accepts | Description

**⚠️ Note:** Attribute properties will override the properties passed on initialization. Always.
#### Example - Properties as HTML attributes
**Vanilla**
```html

@@ -139,2 +307,10 @@ <div data-vbg-play-button="true" data-vbg="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>

<script type="text/javascript">
const videoBackgrounds = new VideoBackgrounds('[data-vbg]');
</script>
```
**jQuery**
```html
<div data-vbg-play-button="true" data-vbg="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>
<script type="text/javascript">
jQuery(document).ready(function() {

@@ -147,3 +323,13 @@ jQuery('[data-vbg]').youtube_background();

#### Example - Properties as JSON
**Vanilla**
```html
<div data-vbg="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>
<script type="text/javascript">
const videoBackgrounds = new VideoBackgrounds('[data-vbg]', {
'play-button': true
});
</script>
```
**jQuery**
```html

@@ -155,4 +341,4 @@ <div data-vbg="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>

jQuery('[data-vbg]').youtube_background({
'play-button': true
});
'play-button': true
});
});

@@ -162,7 +348,8 @@ </script>

### Events
## Events
* **video-background-ready** - when the video is ready to play, this event is triggered. HTML5 videos are ready to play immediately.
* **video-background-time-update** - whenever the time of the video changes while video is playing, this event is triggered. The current time is available from the instance variable `event.detail.currentTime`. On Vimeo and YouTube this event is fired in 250ms intervals.
* **video-background-state-change** - video changes state. The state is available from the instance variable `event.detail.currentState`. It can be: `notstarted`, `ended`, `playing`, `paused`, `buffering`, `cued`.
* **video-background-state-change** - video changes state. The state is available from the instance variable `event.detail.currentState`. It can be: `notstarted`, `ended`, `playing`, `paused`, `buffering`.
* **video-background-play** - video starts playing

@@ -174,6 +361,8 @@ * **video-background-pause** - video is paused

* **video-background-volume-change** - video volume is changed. The volume is available from the instance variable `event.detail.volume`.
* **video-background-resize** - when the video background is resized, this event is fired.
* **video-background-destroyed** - when the video background is destroyed using the `destroy` function of the instance and reverted to pre-initialization state, this event is fired.
Events bubble. If you go vanilla, you can get the video object via `event.detail`.
Events bubble. If you go vanilla, you can get the video object via `event.detail` or `event.originalEvent.detail` in case of jQuery implementation.
You can add listeners to the events onto the element that you've initialised the video background. If the ID of that element is `#video-background`, you can add listeners like this:
You can add listeners to the events onto the element that you've initialized the video background on. If the ID of that element is `#video-background`, you can add listeners like this:

@@ -196,2 +385,68 @@ ```javascript

## Instance Methods
Method | Accepts | Description
-------- | ------- | -----------
**play** | - | Play the video
**pause** | - | Pause the video
**mute** | - | Mute the video
**unmute** | - | Unmute the video
**setSource** | string | Set the video source, must be a link of the same type as the original video. Meaning, for example, if the original video was a YouTube video, the new source must be a YouTube video as well.
**setVolume** | float | Set the video volume. From 0 to 1. 0 is muted, 1 is full volume. 0.5 is half volume. Setting volume doesn't work on mobile, so this setting won't have an effect on mobile.
**getVolume** | - | Get the video volume. From 0 to 1. 0 is muted, 1 is full volume. 0.5 is half volume. Vimeo instance will return a promise that resolves to the volume value.
**seek** | int | Seek the video to a specific percentage complete. From 0 to 100. 0 is the start of the video, 100 is the end of the video.
**seekTo** | int | Seek the video to a specific time in seconds. From 0 to the duration of the video in seconds.
**setStartAt** | int | Set Start At seconds. From 0 to the duration of the video in seconds.
**setEndAt** | int | Set End At seconds. From 0 to the duration of the video in seconds.
## Instance variables
* **playing** - boolean, true if the video is playing, false if the video is not playing. Hard playing state, doesn't change on video being paused via IntersectionObserver.
* **muted** - boolean, true if the video is muted, false if the video is not muted.
* **isIntersecting** - boolean, true if the video is intersecting the viewport, false if the video is not intersecting the viewport.
* **currentState** - the current state of the video. It can be: `notstarted`, `ended`, `playing`, `paused`, `buffering`.
* **currentTime** - the current time of the video in seconds
* **percentComplete** - the percentage of the video that has been played
* **element** - the element that the video background is attached to
* **playerElement** - the element of the video player, meaning either an iframe in case of YouTube and Vimeo, or a video element
* **player** - the video player object, meaning either a YouTube or Vimeo player object, or a video element in case of HTML5 video
* **type** - the type of the video, can be `youtube`, `vimeo` or `video`
* **volume** - volume of the video from 0 to 1
## Factory Instance Methods
Method | Accepts | Description
-------- | ------- | -----------
**add** | element, parameters | Add an element to the factory instance, it will initialize the video background on that element. Parameters are optional.
**get** | element or UID | Get the instance of the video background by UID or element. Returns the instance object.
**destroy** | element or instance | Destroy the video background instance and revert the element to it's pre-initialization state. Accepts either the element or the instance object.
**destroyAll** | - | Destroy all the instances in the index.
**pauseAll** | - | Pause all the instances in the index.
**playAll** | - | Play all the instances in the index.
**muteAll** | - | Mute all the instances in the index.
**unmuteAll** | - | Unmute all the instances in the index.
**setVolumeAll** | float | Set the volume of all the instances in the index. From 0 to 1. 0 is muted, 1 is full volume. 0.5 is half volume. Setting volume doesn't work on mobile, so this setting won't have an effect on mobile.
## Factory Instance Variables
* **index** - the index of all the instances of the video backgrounds. It is an object with keys being the UID of the element and values being the instance object.
* **intersectionObserver** - the instance of the `IntersectionObserver` that is used to track the intersecting video backgrounds.
* **resizeObserver** - the instance of the `ResizeObserver` that is used to track the resize events of the video backgrounds. If the `ResizeObserver` is not supported, the factory instance will fallback to the `window` resize event.
## Browser Support
Minimum supported browsers are both desktop and mobile:
* Chrome 49+
* Firefox 44+
* Safari 10+
* Opera 18+
* Edge 14+
Recommended browsers are both desktop and mobile:
* Chrome 51+
* Firefox 55+
* Safari 12.1+
* Opera 38+
* Edge 17+
Tested with [BrowserStack](https://www.browserstack.com).
## Development

@@ -215,3 +470,3 @@

Code will automatically be packaged into IIFE while you develop, and the page will automatically reload on changes.
Code will automatically be packaged into IIFE and minified while you develop, and the served page will automatically reload on changes.

@@ -224,2 +479,19 @@ To just build the code, without running the local server, run:

### Code
The code is structured like this:
* **main.js** - the main entry point of the script. Used to initialize the jQuery plugin.
* **video-backgrounds.js** - the main entry point of the ES6 module. It contains the factory class `VideoBackgrounds` that is used to create and index multiple instances of the video backgrounds depending on the link type: YouTube, Vimeo or video file.
* **lib/super-video-background.js** - It contains the super class `SuperVideoBackground` with all of the common methods and properties for all of the video background types. This class is inherited by the `YouTubeBackground`, `VimeoBackground` and `VideoBackground` classes.
* **lib/youtube-background.js** - It contains the `YouTubeBackground` class that is used to create and control YouTube video backgrounds.Inherits from `SuperVideoBackground`.
* **lib/vimeo-background.js** - It contains the `VimeoBackground` class that is used to create and control Vimeo video backgrounds. Inherits from `SuperVideoBackground`.
* **lib/video-background.js** - It contains the `VideoBackground` class that is used to create and control HTML5 video backgrounds. Inherits from `SuperVideoBackground`.
* **lib/buttons.js** - It contains the play and pause automatic buttons and their functionality that are added to the video backgrounds. I seriously don't know why I created this in the first place.
* **lib/controls.js** - Module containing externalized control classes `SeekBar`, `PlayToggle`, `MuteToggle` which tune onto the video events and use the common API, they are not bundled with the script, but are available as a standalone module exports.
Tu summarize, because YouTube, Vimeo and HTML5 Video API's are different - we need a way to generalize these APIs and provide a common interface for all of them. Due to a lot of common code we have the `SuperVideoBackground` class that is inherited by the `YouTubeBackground`, `VimeoBackground` and `VideoBackground` classes.
And lastly we have the `VideoBackgrounds` factory class that is used to create and index multiple instances of the video backgrounds depending on the link type: YouTube, Vimeo or video file and provide a single IntersectionObserver and ResizeObserver for all of the instances.
THE END.

1

src/lib/buttons.js

@@ -27,3 +27,2 @@

//TODO: solve this with ARIA toggle states
if (obj.params[props.condition_parameter] === props.initialState) {

@@ -30,0 +29,0 @@ buttonOn(props);

42

src/lib/super-video-background.js

@@ -19,5 +19,4 @@ import { generateActionButton } from './buttons.js';

this.state = {};
this.state.playing = false;
this.state.muted = false;
this.playing = false;
this.muted = false;
this.currentState = 'notstarted';

@@ -28,2 +27,4 @@

this.volume = 1;
this.params = {};

@@ -62,7 +63,9 @@

this.params.resolution_mod = parseResolutionString(this.params.resolution);
this.state.playing = this.params.autoplay;
this.state.muted = this.params.muted;
this.playing = this.params.autoplay;
this.muted = this.params.muted;
this.currentTime = 0 || this.params['start-at'];
this.duration = 0 || this.params['end-at'];
this.volume = this.params.volume;
this.currentTime = this.params['start-at'] || 0;
this.duration = this.params['end-at'] || 0;
this.percentComplete = 0;

@@ -80,3 +83,3 @@ if (this.params['start-at']) this.percentComplete = this.timeToPercentage(this.params['start-at']);

innerHtml: '<i class="fa"></i>',
initialState: !this.state.playing,
initialState: !this.playing,
stateClassName: 'paused',

@@ -94,3 +97,3 @@ condition_parameter: 'autoplay',

innerHtml: '<i class="fa"></i>',
initialState: this.state.muted,
initialState: this.muted,
stateClassName: 'muted',

@@ -124,4 +127,4 @@ condition_parameter: 'muted',

resize(element) {
if (this.params['fit-box']) return;
proportionalParentCoverResize(element || this.playerElement, this.params.resolution_mod, this.params.offset);
if (!this.params['fit-box']) proportionalParentCoverResize(element || this.playerElement, this.params.resolution_mod, this.params.offset);
this.dispatchEvent('video-background-resize');
}

@@ -221,2 +224,3 @@

if (this.timeUpdateTimer) clearInterval(this.timeUpdateTimer);
this.dispatchEvent('video-background-destroyed');
}

@@ -244,2 +248,12 @@

setStartAt(startAt) {
this.params['start-at'] = startAt;
}
setEndAt(endAt) {
this.params['end-at'] = endAt;
if (this.duration > endAt) this.duration = endAt;
if (this.currentTime > endAt) this.onVideoEnded();
}
dispatchEvent(name) {

@@ -270,6 +284,4 @@ this.element.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: this }));

for (let k in defaults) {
if (!params.hasOwnProperty(k)) {
//load in defaults if the param hasn't been set
res_params[k] = defaults[k];
}
//load in defaults if the param hasn't been set
res_params[k] = !params.hasOwnProperty(k) ? defaults[k] : params[k];
}

@@ -276,0 +288,0 @@ }

30

src/lib/video-background.js

@@ -36,6 +36,6 @@ import { SuperVideoBackground } from './super-video-background.js';

const playerElement = document.createElement('video');
playerElement.toggleAttribute('playsinline', true);
playerElement.toggleAttribute('loop', this.params.loop);
playerElement.toggleAttribute('autoplay', this.params.autoplay && (this.params['always-play'] || this.isIntersecting));
playerElement.toggleAttribute('muted', this.params.muted);
playerElement.setAttribute('playsinline', '');
if (this.params.loop) playerElement.setAttribute('loop', '');
if (this.params.autoplay && (this.params['always-play'] || this.isIntersecting)) playerElement.setAttribute('autoplay', '');
if (this.muted) playerElement.setAttribute('muted', '');
if (this.params['lazyloading']) playerElement.setAttribute('loading', 'lazy');

@@ -49,5 +49,5 @@

this.playerElement = this.player;
if (this.volume !== 1 && !this.muted) this.setVolume(this.volume);
if (this.params.volume !== 1 && !this.params.muted) this.setVolume(this.params.volume);
this.playerElement.setAttribute('id', this.uid)

@@ -161,3 +161,3 @@

softPause() {
if (!this.state.playing || !this.player) return;
if (!this.playing || !this.player) return;
this.player.pause();

@@ -167,3 +167,3 @@ }

softPlay() {
if (!this.state.playing || !this.player) return;
if (!this.playing || !this.player) return;
this.player.play();

@@ -185,3 +185,3 @@ }

this.state.playing = true;
this.playing = true;

@@ -193,3 +193,3 @@ this.player.play();

if (!this.player) return;
this.state.playing = false;
this.playing = false;

@@ -201,3 +201,3 @@ this.player.pause();

if (!this.player) return;
this.state.muted = false;
this.muted = false;

@@ -214,3 +214,3 @@ this.player.muted = false;

if (!this.player) return;
this.state.muted = true;
this.muted = true;

@@ -221,4 +221,10 @@ this.player.muted = true;

getVolume() {
if (!this.player) return;
return this.player.volume;
}
setVolume(volume) {
if (!this.player) return;
this.volume = volume;

@@ -225,0 +231,0 @@ this.player.volume = volume;

22

src/lib/vimeo-background.js

@@ -40,3 +40,3 @@ import { SuperVideoBackground } from './super-video-background.js';

if (this.params.volume !== 1 && !this.params.muted) this.setVolume(this.params.volume);
if (this.volume !== 1 && !this.muted) this.setVolume(this.volume);
}

@@ -60,3 +60,3 @@

if (this.params.autoplay && this.params['always-play']) {
if (this.params.autoplay && (this.params['always-play'] || this.isIntersecting)) {
src += '&autoplay=1';

@@ -187,3 +187,3 @@ }

softPause() {
if (!this.state.playing || !this.player) return;
if (!this.playing || !this.player) return;
this.player.pause();

@@ -193,3 +193,3 @@ }

softPlay() {
if (!this.state.playing || !this.player) return;
if (!this.playing || !this.player) return;
this.player.play();

@@ -200,3 +200,3 @@ }

if (!this.player) return;
this.state.playing = true;
this.playing = true;

@@ -208,3 +208,3 @@ this.player.play();

if (!this.player) return;
this.state.playing = false;
this.playing = false;

@@ -216,3 +216,3 @@ this.player.pause();

if (!this.player) return;
this.state.muted = false;
this.muted = false;

@@ -229,3 +229,3 @@ if (!this.initialVolume) {

if (!this.player) return;
this.state.muted = true;
this.muted = true;

@@ -236,4 +236,10 @@ this.player.setMuted(true);

getVolume() {
if (!this.player) return;
return this.player.getVolume();
}
setVolume(volume) {
if (!this.player) return;
this.volume = volume;

@@ -240,0 +246,0 @@ this.player.setVolume(volume);

23

src/lib/youtube-background.js

@@ -54,2 +54,4 @@ import { SuperVideoBackground } from './super-video-background.js';

});
if (this.volume !== 1 && !this.muted) this.setVolume(this.volume);
}

@@ -85,3 +87,3 @@

if (this.params.autoplay && this.params['always-play']) {
if (this.params.autoplay && (this.params['always-play'] || this.isIntersecting)) {
src += '&autoplay=1';

@@ -197,3 +199,3 @@ }

softPause() {
if (!this.state.playing || !this.player) return;
if (!this.playing || !this.player) return;
this.player.pauseVideo();

@@ -203,3 +205,3 @@ }

softPlay() {
if (!this.state.playing || !this.player) return;
if (!this.playing || !this.player) return;
this.player.playVideo();

@@ -210,3 +212,3 @@ }

if (!this.player) return;
this.state.playing = true;
this.playing = true;

@@ -220,3 +222,3 @@ if (this.params['start-at'] && this.player.getCurrentTime() < this.params['start-at'] ) {

pause() {
this.state.playing = false;
this.playing = false;
this.player.pauseVideo();

@@ -227,3 +229,3 @@ }

if (!this.player) return;
this.state.muted = false;
this.muted = false;

@@ -240,3 +242,3 @@ if (!this.initialVolume) {

if (!this.player) return;
this.state.muted = true;
this.muted = true;

@@ -247,4 +249,10 @@ this.player.mute();

getVolume() {
if (!this.player) return;
return this.player.getVolume() / 100;
}
setVolume(volume) {
if (!this.player) return;
this.volume = volume;

@@ -255,1 +263,2 @@ this.player.setVolume(volume * 100);

}

3

src/main.js

@@ -1,2 +0,2 @@

import { VideoBackgrounds, SeekBar } from './video-backgrounds.js';
import { VideoBackgrounds } from './video-backgrounds.js';

@@ -17,3 +17,2 @@ if (typeof jQuery == 'function') {

window.SeekBar = SeekBar;
window.VideoBackgrounds = VideoBackgrounds;

133

src/video-backgrounds.js

@@ -17,23 +17,27 @@ import { YoutubeBackground } from './lib/youtube-background.js';

this.intersectionObserver = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
const uid = entry.target.getAttribute('data-vbg-uid');
this.intersectionObserver = null;
if (uid && self.index.hasOwnProperty(uid) && entry.isIntersecting) {
self.index[uid].isIntersecting = true;
try {
if (self.index[uid].player && self.index[uid].params.autoplay) self.index[uid].softPlay();
} catch (e) {
// console.log(e);
if ('IntersectionObserver' in window) {
this.intersectionObserver = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
const uid = entry.target.getAttribute('data-vbg-uid');
if (uid && self.index.hasOwnProperty(uid) && entry.isIntersecting) {
self.index[uid].isIntersecting = true;
try {
if (self.index[uid].player && self.index[uid].params.autoplay) self.index[uid].softPlay();
} catch (e) {
// console.log(e);
}
} else {
self.index[uid].isIntersecting = false;
try {
if (self.index[uid].player) self.index[uid].softPause();
} catch (e) {
// console.log(e);
}
}
} else {
self.index[uid].isIntersecting = false;
try {
if (self.index[uid].player) self.index[uid].softPause();
} catch (e) {
// console.log(e);
}
}
});
});
});
}

@@ -70,2 +74,10 @@ this.resizeObserver = null;

add(element, params) {
if (!element) return;
if (element.hasAttribute('data-vbg-uid')) return;
if (!this.intersectionObserver) {
if (!params) params = {};
params['always-play'] = true;
}
const link = element.getAttribute('data-youtube') || element.getAttribute('data-vbg');

@@ -99,3 +111,3 @@ const vid_data = this.getVidID(link);

if (!this.index[uid].params['always-play']) {
if (!this.index[uid].params['always-play'] && this.intersectionObserver) {
this.intersectionObserver.observe(element);

@@ -106,5 +118,5 @@ }

destroy(element) {
const uid = element.getAttribute('data-vbg-uid');
const uid = element.uid || element.getAttribute('data-vbg-uid');
if (uid && this.index.hasOwnProperty(uid)) {
if (!this.index[uid].params['always-play']) this.intersectionObserver.unobserve(element);
if (!this.index[uid].params['always-play'] && this.intersectionObserver) this.intersectionObserver.unobserve(element);
if (this.resizeObserver) this.resizeObserver.unobserve(element);

@@ -116,2 +128,8 @@ this.index[uid].destroy();

destroyAll() {
for (let k in this.index) {
this.destroy(this.index[k].playerElement);
}
}
getVidID(link) {

@@ -162,3 +180,3 @@ if (link === undefined && link === null) return;

pauseVideos() {
pauseAll() {
for (let k in this.index) {

@@ -169,3 +187,3 @@ this.index[k].pause();

playVideos() {
playAll() {
for (let k in this.index) {

@@ -176,2 +194,20 @@ this.index[k].play();

muteAll() {
for (let k in this.index) {
this.index[k].mute();
}
}
unmuteAll() {
for (let k in this.index) {
this.index[k].unmute();
}
}
setVolumeAll(volume) {
for (let k in this.index) {
this.index[k].setVolume(volume);
}
}
initPlayers(callback) {

@@ -213,52 +249,1 @@ const self = this;

}
export class SeekBar {
constructor(seekBarElem, vbgInstance) {
this.lock = false;
if (!seekBarElem) return;
this.seekBarElem = seekBarElem;
this.progressElem = this.seekBarElem.querySelector('.js-seek-bar-progress');
this.inputElem = this.seekBarElem.querySelector('.js-seek-bar');
this.targetSelector = this.seekBarElem.getAttribute('data-target');
if (!this.targetSelector) return;
this.targetElem = document.querySelector(this.targetSelector);
if (!this.targetElem) return;
if (vbgInstance) this.vbgInstance = vbgInstance;
this.targetElem.addEventListener('video-background-time-update', this.onTimeUpdate.bind(this));
this.targetElem.addEventListener('video-background-play', this.onReady.bind(this));
this.targetElem.addEventListener('video-background-ready', this.onReady.bind(this));
this.inputElem.addEventListener('input', this.onInput.bind(this));
this.inputElem.addEventListener('change', this.onChange.bind(this));
}
onReady(event) {
this.vbgInstance = event.detail;
}
onTimeUpdate(event) {
if (!this.vbgInstance) this.vbgInstance = event.detail;
if (!this.lock) requestAnimationFrame(() => this.setProgress(this.vbgInstance.percentComplete));
}
onInput(event) {
this.lock = true;
requestAnimationFrame(() => this.setProgress(event.target.value));
}
onChange(event) {
this.lock = false;
requestAnimationFrame(() => this.setProgress(event.target.value));
if (this.vbgInstance) {
this.vbgInstance.seek(event.target.value);
if (this.vbgInstance.playerElement && this.vbgInstance.playerElement.style.opacity === 0) this.vbgInstance.playerElement.style.opacity = 1;
}
}
setProgress(value) {
if (this.progressElem) this.progressElem.value = value;
if (this.inputElem) this.inputElem.value = value;
}
}
index.html

Sorry, the diff of this file is not supported yet

jquery.youtube-background.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc