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.1 to 1.1.2

196

jquery.youtube-background.js

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

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

@@ -105,2 +105,7 @@ // src/lib/buttons.js

}
function fixed(number, digits) {
if (!digits)
return parseInt(number);
return parseFloat(number.toFixed(digits));
}
function percentage(num, total) {

@@ -232,3 +237,3 @@ if (!num || !total || Number.isNaN(num) || Number.isNaN(total))

this.params.resolution_mod = parseResolutionString(this.params.resolution);
this.playing = this.params.autoplay;
this.playing = false;
this.muted = this.params.muted;

@@ -249,3 +254,3 @@ this.volume = this.params.volume;

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

@@ -283,9 +288,12 @@ condition_parameter: "autoplay",

if (!this.duration)
return 0;
return this.params["start-at"] || 0;
if (percentage2 > 100)
return this.duration;
if (percentage2 < 0)
return 0;
if (percentage2 <= 0)
return this.params["start-at"] || 0;
const duration = this.duration - this.params["start-at"];
let time = percentage2 * duration / 100;
time = fixed(time, 3);
if (time > duration)
time = duration;
if (this.params["start-at"])

@@ -415,2 +423,11 @@ time += this.params["start-at"];

}
shouldPlay() {
if (this.currentState === "ended" && !this.params.loop)
return false;
if (this.params["always-play"] && this.currentState !== "playing")
return true;
if (this.isIntersecting && this.params.autoplay && this.currentState !== "playing")
return true;
return false;
}
mobileLowBatteryAutoplayHack() {

@@ -504,2 +521,3 @@ if (!this.params["force-on-low-battery"])

"onStateChange": this.onVideoStateChange.bind(this)
// 'onError': this.onVideoError.bind(this)
}

@@ -510,2 +528,5 @@ });

}
onVideoError(event) {
console.error(event);
}
injectScript() {

@@ -573,6 +594,8 @@ if (window.hasOwnProperty("YT") || document.querySelector('script[src="https://www.youtube.com/player_api"]'))

this.percentComplete = this.timeToPercentage(this.currentTime);
if (this.duration && this.currentTime >= this.duration) {
if (this.params["end-at"] && this.duration && this.currentTime >= this.duration) {
this.currentState = "ended";
this.dispatchEvent("video-background-state-change");
this.onVideoEnded();
this.stopTimeUpdateTimer();
return;
}

@@ -593,5 +616,4 @@ this.dispatchEvent("video-background-time-update");

this.currentState = this.convertState(event.data);
if (this.currentState === "ended") {
if (this.currentState === "ended")
this.onVideoEnded();
}
if (this.currentState === "notstarted" && this.params.autoplay) {

@@ -601,22 +623,34 @@ this.seekTo(this.params["start-at"]);

}
if (this.currentState === "playing") {
if (!this.initialPlay) {
this.initialPlay = true;
this.playerElement.style.opacity = 1;
}
if (!this.duration) {
this.setDuration(this.player.getDuration());
}
this.dispatchEvent("video-background-play");
this.startTimeUpdateTimer();
} else {
this.dispatchEvent("video-background-pause");
this.stopTimeUpdateTimer();
}
if (this.currentState === "playing")
this.onVideoPlay();
if (this.currentState === "paused")
this.onVideoPause();
this.dispatchEvent("video-background-state-change");
}
onVideoPlay() {
if (!this.initialPlay) {
this.initialPlay = true;
this.playerElement.style.opacity = 1;
}
const seconds = this.player.getCurrentTime();
if (this.params["start-at"] && seconds < this.params["start-at"]) {
this.seekTo(this.params["start-at"]);
}
if (this.duration && seconds >= this.duration) {
this.seekTo(this.params["start-at"]);
}
if (!this.duration) {
this.setDuration(this.player.getDuration());
}
this.dispatchEvent("video-background-play");
this.startTimeUpdateTimer();
}
onVideoPause() {
this.dispatchEvent("video-background-pause");
this.stopTimeUpdateTimer();
}
onVideoEnded() {
this.dispatchEvent("video-background-ended");
if (!this.params.loop)
return this.player.pause();
return this.pause();
this.seekTo(this.params["start-at"]);

@@ -629,6 +663,9 @@ this.player.playVideo();

seekTo(seconds, allowSeekAhead = true) {
if (!this.player)
return;
this.player.seekTo(seconds, allowSeekAhead);
this.dispatchEvent("video-background-seeked");
}
softPause() {
if (!this.playing || !this.player)
if (!this.playing || !this.player || this.currentState === "paused")
return;

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

softPlay() {
if (!this.playing || !this.player)
if (!this.player || this.currentState === "playing")
return;

@@ -647,8 +684,7 @@ this.player.playVideo();

this.playing = true;
if (this.params["start-at"] && this.player.getCurrentTime() < this.params["start-at"]) {
this.seekTo(this.params["start-at"]);
}
this.player.playVideo();
}
pause() {
if (!this.player)
return;
this.playing = false;

@@ -727,2 +763,5 @@ this.player.pauseVideo();

}
onVideoError(event) {
console.error(event);
}
generatePlayerElement() {

@@ -807,3 +846,4 @@ const playerElement = document.createElement("iframe");

this.dispatchEvent("video-background-time-update");
if (this.duration && event.seconds >= this.duration) {
this.setDuration(event.duration);
if (this.params["end-at"] && this.duration && event.seconds >= this.duration) {
this.onVideoEnded();

@@ -816,13 +856,17 @@ }

onVideoPlay(event) {
this.setDuration(event.duration);
if (!this.initialPlay) {
this.initialPlay = true;
this.playerElement.style.opacity = 1;
this.player.setLoop(this.params.loop);
if (!(this.params.autoplay && (this.params["always-play"] || this.isIntersecting))) {
return this.player.pause();
}
}
this.setDuration(event.duration);
const seconds = event.seconds;
if (self.params["start-at"] && seconds < self.params["start-at"]) {
self.seekTo(self.params["start-at"]);
if (this.params["start-at"] && seconds < this.params["start-at"]) {
this.seekTo(this.params["start-at"]);
}
if (self.duration && seconds >= self.duration) {
self.seekTo(self.params["start-at"]);
if (this.duration && seconds >= this.duration) {
this.seekTo(this.params["start-at"]);
}

@@ -840,6 +884,9 @@ this.updateState("playing");

seekTo(time) {
if (!this.player)
return;
this.player.setCurrentTime(time);
this.dispatchEvent("video-background-seeked");
}
softPause() {
if (!this.playing || !this.player)
if (!this.playing || !this.player || this.currentState === "paused")
return;

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

softPlay() {
if (!this.playing || !this.player)
if (!this.player || this.currentState === "playing")
return;

@@ -988,5 +1035,2 @@ this.player.play();

this.setDuration(this.player.duration);
if (this.params["start-at"] && this.params.autoplay) {
this.seekTo(this.params["start-at"]);
}
}

@@ -997,3 +1041,3 @@ onVideoTimeUpdate() {

this.dispatchEvent("video-background-time-update");
if (this.currentTime >= this.duration) {
if (this.params["end-at"] && this.currentTime >= this.duration) {
this.onVideoEnded();

@@ -1007,2 +1051,9 @@ }

}
const seconds = this.player.currentTime;
if (this.params["start-at"] && seconds <= this.params["start-at"]) {
this.seekTo(this.params["start-at"]);
}
if (this.duration && seconds >= this.duration) {
this.seekTo(this.params["start-at"]);
}
this.updateState("playing");

@@ -1030,2 +1081,4 @@ this.dispatchEvent("video-background-play");

seekTo(seconds) {
if (!this.player)
return;
if (this.player.hasOwnProperty("fastSeek")) {

@@ -1036,5 +1089,6 @@ this.player.fastSeek(seconds);

this.player.currentTime = seconds;
this.dispatchEvent("video-background-seeked");
}
softPause() {
if (!this.playing || !this.player)
if (!this.playing || !this.player || this.currentState === "paused")
return;

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

softPlay() {
if (!this.playing || !this.player)
if (!this.player || this.currentState === "playing")
return;

@@ -1052,9 +1106,2 @@ this.player.play();

return;
const seconds = this.player.currentTime;
if (this.params["start-at"] && seconds <= this.params["start-at"]) {
this.seekTo(this.params["start-at"]);
}
if (this.duration && seconds >= this.duration) {
this.seekTo(this.params["start-at"]);
}
this.playing = true;

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

this.index = {};
const self2 = this;
const self = this;
this.intersectionObserver = null;

@@ -1117,14 +1164,14 @@ if ("IntersectionObserver" in window) {

const uid = entry.target.getAttribute("data-vbg-uid");
if (uid && self2.index.hasOwnProperty(uid) && entry.isIntersecting) {
self2.index[uid].isIntersecting = true;
if (uid && self.index.hasOwnProperty(uid) && entry.isIntersecting) {
self.index[uid].isIntersecting = true;
try {
if (self2.index[uid].player && self2.index[uid].params.autoplay)
self2.index[uid].softPlay();
if (self.index[uid].player && self.index[uid].params.autoplay)
self.index[uid].softPlay();
} catch (e) {
}
} else {
self2.index[uid].isIntersecting = false;
self.index[uid].isIntersecting = false;
try {
if (self2.index[uid].player)
self2.index[uid].softPause();
if (self.index[uid].player)
self.index[uid].softPause();
} catch (e) {

@@ -1141,4 +1188,4 @@ }

const uid = entry.target.getAttribute("data-vbg-uid");
if (uid && self2.index.hasOwnProperty(uid)) {
window.requestAnimationFrame(() => self2.index[uid].resize());
if (uid && self.index.hasOwnProperty(uid)) {
window.requestAnimationFrame(() => self.index[uid].resize());
}

@@ -1149,4 +1196,4 @@ });

window.addEventListener("resize", function() {
for (let k in self2.index) {
window.requestAnimationFrame(() => self2.index[k].resize(self2.index[k].playerElement));
for (let k in self.index) {
window.requestAnimationFrame(() => self.index[k].resize(self.index[k].playerElement));
}

@@ -1162,3 +1209,14 @@ });

}
document.addEventListener("visibilitychange", this.onVisibilityChange.bind(this));
}
onVisibilityChange() {
if (document.hidden)
return;
for (let k in this.index) {
const instance = this.index[k];
if (instance.shouldPlay()) {
instance.softPlay();
}
}
}
add(element, params) {

@@ -1281,7 +1339,7 @@ if (!element)

initPlayers(callback) {
const self2 = this;
const self = this;
window.onYouTubeIframeAPIReady = function() {
for (let k in self2.index) {
if (self2.index[k] instanceof YoutubeBackground) {
self2.index[k].initYTPlayer();
for (let k in self.index) {
if (self.index[k] instanceof YoutubeBackground) {
self.index[k].initYTPlayer();
}

@@ -1297,5 +1355,5 @@ }

window.onVimeoIframeAPIReady = function() {
for (let k in self2.index) {
if (self2.index[k] instanceof VimeoBackground) {
self2.index[k].initVimeoPlayer();
for (let k in self.index) {
if (self.index[k] instanceof VimeoBackground) {
self.index[k].initVimeoPlayer();
}

@@ -1302,0 +1360,0 @@ }

4

jquery.youtube-background.min.js

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

/* 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})();
/* youtube-background v1.1.2 | 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 e?parseFloat(t.toFixed(e)):parseInt(t)}function C(t,e){return!t||!e||Number.isNaN(t)||Number.isNaN(e)?0:t/e*100}function L(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 N(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 O(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:O(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.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=L(this.params.resolution),this.playing=!1,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.params.autoplay,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 C(t,e)}percentageToTime(t){if(!this.duration)return this.params["start-at"]||0;if(t>100)return this.duration;if(t<=0)return this.params["start-at"]||0;const e=this.duration-this.params["start-at"];let i=t*e/100;return i=I(i,3),i>e&&(i=e),this.params["start-at"]&&(i+=this.params["start-at"]),i}resize(t){this.params["fit-box"]||N(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}))}shouldPlay(){return this.currentState==="ended"&&!this.params.loop?!1:!!(this.params["always-play"]&&this.currentState!=="playing"||this.isIntersecting&&this.params.autoplay&&this.currentState!=="playing")}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))}onVideoError(t){console.error(t)}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();if(t!==this.currentTime){if(this.currentTime=t,this.percentComplete=this.timeToPercentage(this.currentTime),this.params["end-at"]&&this.duration&&this.currentTime>=this.duration){this.currentState="ended",this.dispatchEvent("video-background-state-change"),this.onVideoEnded(),this.stopTimeUpdateTimer();return}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.onVideoPlay(),this.currentState==="paused"&&this.onVideoPause(),this.dispatchEvent("video-background-state-change")}onVideoPlay(){this.initialPlay||(this.initialPlay=!0,this.playerElement.style.opacity=1);const t=this.player.getCurrentTime();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.duration||this.setDuration(this.player.getDuration()),this.dispatchEvent("video-background-play"),this.startTimeUpdateTimer()}onVideoPause(){this.dispatchEvent("video-background-pause"),this.stopTimeUpdateTimer()}onVideoEnded(){if(this.dispatchEvent("video-background-ended"),!this.params.loop)return this.pause();this.seekTo(this.params["start-at"]),this.player.playVideo()}seek(t){this.seekTo(this.percentageToTime(t),!0)}seekTo(t,e=!0){this.player&&(this.player.seekTo(t,e),this.dispatchEvent("video-background-seeked"))}softPause(){!this.playing||!this.player||this.currentState==="paused"||this.player.pauseVideo()}softPlay(){!this.player||this.currentState==="playing"||this.player.playVideo()}play(){this.player&&(this.playing=!0,this.player.playVideo())}pause(){this.player&&(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))}onVideoError(t){console.error(t)}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.setDuration(t.duration),this.params["end-at"]&&this.duration&&t.seconds>=this.duration&&this.onVideoEnded()}onVideoBuffering(){this.updateState("buffering")}onVideoPlay(t){if(this.setDuration(t.duration),!this.initialPlay&&(this.initialPlay=!0,this.playerElement.style.opacity=1,this.player.setLoop(this.params.loop),!(this.params.autoplay&&(this.params["always-play"]||this.isIntersecting))))return this.player.pause();const e=t.seconds;this.params["start-at"]&&e<this.params["start-at"]&&this.seekTo(this.params["start-at"]),this.duration&&e>=this.duration&&this.seekTo(this.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&&(this.player.setCurrentTime(t),this.dispatchEvent("video-background-seeked"))}softPause(){!this.playing||!this.player||this.currentState==="paused"||this.player.pause()}softPlay(){!this.player||this.currentState==="playing"||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"))}},B=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)}onVideoTimeUpdate(){this.currentTime=this.player.currentTime,this.percentComplete=this.timeToPercentage(this.player.currentTime),this.dispatchEvent("video-background-time-update"),this.params["end-at"]&&this.currentTime>=this.duration&&this.onVideoEnded()}onVideoPlay(){this.initialPlay||(this.initialPlay=!0,this.playerElement.style.opacity=1);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.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){if(this.player.hasOwnProperty("fastSeek")){this.player.fastSeek(t);return}this.player.currentTime=t,this.dispatchEvent("video-background-seeked")}}softPause(){!this.playing||!this.player||this.currentState==="paused"||this.player.pause()}softPlay(){!this.player||this.currentState==="playing"||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.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)}document.addEventListener("visibilitychange",this.onVisibilityChange.bind(this))}}onVisibilityChange(){if(!document.hidden)for(let t in this.index){const e=this.index[t];e.shouldPlay()&&e.softPlay()}}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 B(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})();

2

package.json
{
"name": "youtube-background",
"version": "1.1.1",
"version": "1.1.2",
"description": "ESM / jQuery plugin for creating video backgrounds from YouTube, Vimeo or video file links.",

@@ -5,0 +5,0 @@ "main": "jquery.youtube-background.js",

162

src/lib/controls.js
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;
constructor(element, vbgInstance) {
this.lock = false;
if (!element) return;
this.element = element;
this.progressElem = this.element.querySelector('.js-seek-bar-progress');
this.inputElem = this.element.querySelector('.js-seek-bar');
this.targetSelector = this.element.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.targetElem.addEventListener('video-background-destroyed', this.onDestroyed.bind(this));
if (vbgInstance) this.setVBGInstance(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.targetElem.addEventListener('video-background-destroyed', this.onDestroyed.bind(this));
this.inputElem.addEventListener('input', this.onInput.bind(this));
this.inputElem.addEventListener('change', this.onChange.bind(this));
this.inputElem.addEventListener('input', this.onInput.bind(this));
this.inputElem.addEventListener('change', this.onChange.bind(this));
}
setVBGInstance(vbgInstance) {
if (this.vbgInstance) return;
this.vbgInstance = vbgInstance;
this.element.setAttribute('data-target-uid', vbgInstance.uid);
}
onReady(event) {
this.vbgInstance = event.detail;
this.setVBGInstance(event.detail);
}
onTimeUpdate(event) {
if (!this.vbgInstance) this.vbgInstance = event.detail;
if (!this.lock) requestAnimationFrame(() => this.setProgress(this.vbgInstance.percentComplete));
this.setVBGInstance(event.detail);
if (!this.lock) requestAnimationFrame(() => this.setProgress(this.vbgInstance.percentComplete));
}

@@ -40,13 +46,13 @@

onInput(event) {
this.lock = true;
requestAnimationFrame(() => this.setProgress(event.target.value));
this.lock = true;
requestAnimationFrame(() => this.setProgress(event.target.value));
}
onChange(event) {
this.lock = false;
requestAnimationFrame(() => this.setProgress(event.target.value));
if (this.vbgInstance) {
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;
}
}
}

@@ -60,2 +66,104 @@

class VideoBackgroundGroup {
constructor(selector, factoryInstance) {
this.elements = selector;
if (this.elements instanceof Element) this.elements = [this.elements];
if (typeof this.elements === 'string') this.elements = document.querySelectorAll(selector);
if (!this.elements || !this.elements.length) return;
this.factoryInstance = factoryInstance;
this.stack = [];
this.map = new Map();
for (let i = 0; i < this.elements.length; i++) {
const element = this.elements[i];
if (!element.hasAttribute('data-vbg-uid')) this.factoryInstance.add(element);
this.stack.push(element);
this.map.set(element, i);
if (i === 0) {
this.current = 0;
this.currentElement = element;
this.currentInstance = this.factoryInstance.get(element);
}
element.addEventListener('video-background-ended', this.onVideoEnded.bind(this));
element.addEventListener('video-background-seeked', this.onVideoSeeked.bind(this));
element.addEventListener('video-background-pause', this.onVideoPause.bind(this));
}
}
onVideoPause(event) {
const stackIndex = this.map.get(event.detail.element);
if (stackIndex === this.current) return;
this.levelSeekBars();
}
levelSeekBars() {
for (let i = 0; i < this.stack.length; i++) {
if (i === this.current) continue;
const seekBarElem = this.getSeekBar(this.factoryInstance.get(this.stack[i]));
if (!seekBarElem) continue;
if (i < this.current) {
requestAnimationFrame(() => this.setProgress(seekBarElem, 100));
} else {
requestAnimationFrame(() => this.setProgress(seekBarElem, 0));
}
}
}
getSeekBar(currentInstance) {
if (!currentInstance) return;
const uid = currentInstance.uid;
const element = document.querySelector(`.js-seek-bar-wrap[data-target-uid="${uid}"]`);
if (!element) return;
return element;
}
setProgress(seekBarElem, value) {
if (!seekBarElem) return;
const progressElem = seekBarElem.querySelector('.js-seek-bar-progress');
const inputElem = seekBarElem.querySelector('.js-seek-bar');
if (progressElem) progressElem.value = value;
if (inputElem) inputElem.value = value;
}
onVideoSeeked(event) {
const current = this.map.get(event.detail.element);
if (this.current !== current) this.setCurrent(current, true);
}
setCurrent(index, seek) {
const previous = this.current;
if (index >= this.stack.length) index = 0;
if (index < 0) index = this.stack.length - 1;
this.current = index;
this.currentInstance = this.factoryInstance.get(this.stack[this.current]);
this.currentElement = this.stack[this.current];
this.stack[previous].style.display = 'none';
this.currentElement.style.display = 'block';
if (!seek) {
const seekBarElem = this.getSeekBar(this.currentInstance);
if (seekBarElem) this.setProgress(seekBarElem, 0);
this.currentInstance.seek(0);
}
if (!this.currentInstance.playing) this.currentInstance.play();
}
onVideoEnded(event) {
if (event.detail.element !== this.currentElement) return;
this.next()
}
next() {
this.setCurrent(this.current + 1);
}
prev() {
this.setCurrent(this.current - 1);
}
}
export class PlayToggle {

@@ -62,0 +170,0 @@ constructor(playToggleElem, vbgInstance) {

19

src/lib/super-video-background.js
import { generateActionButton } from './buttons.js';
import { isArray, stringToType, isMobile, parseResolutionString, proportionalParentCoverResize, percentage } from 'book-of-spells';
import { isArray, stringToType, isMobile, parseResolutionString, proportionalParentCoverResize, percentage, fixed } from 'book-of-spells';

@@ -61,3 +61,3 @@ export class SuperVideoBackground {

this.params.resolution_mod = parseResolutionString(this.params.resolution);
this.playing = this.params.autoplay;
this.playing = false;
this.muted = this.params.muted;

@@ -81,3 +81,3 @@

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

@@ -114,7 +114,9 @@ condition_parameter: 'autoplay',

percentageToTime(percentage) {
if (!this.duration) return 0;
if (!this.duration) return this.params['start-at'] || 0;
if (percentage > 100) return this.duration;
if (percentage < 0) return 0;
if (percentage <= 0) return this.params['start-at'] || 0;
const duration = this.duration - this.params['start-at']; // normalize
let time = percentage * duration / 100;
time = fixed(time, 3)
if (time > duration) time = duration;
if (this.params['start-at']) time += this.params['start-at']; // normalize

@@ -258,2 +260,9 @@ return time;

shouldPlay() {
if (this.currentState === 'ended' && !this.params.loop) return false;
if (this.params['always-play'] && this.currentState !== 'playing') return true;
if (this.isIntersecting && this.params.autoplay && this.currentState !== 'playing') return true;
return false;
}
mobileLowBatteryAutoplayHack() {

@@ -260,0 +269,0 @@ if (!this.params['force-on-low-battery']) return;

34

src/lib/video-background.js

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

this.setDuration(this.player.duration);
if (this.params['start-at'] && this.params.autoplay) {
this.seekTo(this.params['start-at']);
}
}

@@ -114,3 +110,3 @@

if (this.currentTime >= this.duration) {
if (this.params['end-at'] && this.currentTime >= this.duration) {
this.onVideoEnded();

@@ -125,3 +121,12 @@ }

}
const seconds = this.player.currentTime;
if (this.params['start-at'] && seconds <= this.params['start-at']) {
this.seekTo(this.params['start-at']);
}
if (this.duration && seconds >= this.duration) {
this.seekTo(this.params['start-at']);
}
this.updateState('playing');

@@ -154,2 +159,3 @@ this.dispatchEvent('video-background-play');

seekTo(seconds) {
if (!this.player) return;
if (this.player.hasOwnProperty('fastSeek')) {

@@ -160,6 +166,7 @@ this.player.fastSeek(seconds);

this.player.currentTime = seconds;
this.dispatchEvent('video-background-seeked');
}
softPause() {
if (!this.playing || !this.player) return;
if (!this.playing || !this.player || this.currentState === 'paused') return;
this.player.pause();

@@ -169,3 +176,3 @@ }

softPlay() {
if (!this.playing || !this.player) return;
if (!this.player || this.currentState === 'playing') return;
this.player.play();

@@ -176,15 +183,4 @@ }

if (!this.player) return;
const seconds = this.player.currentTime;
if (this.params['start-at'] && seconds <= this.params['start-at']) {
this.seekTo(this.params['start-at']);
}
this.playing = true;
if (this.duration && seconds >= this.duration) {
this.seekTo(this.params['start-at']);
}
this.playing = true;
this.player.play();

@@ -191,0 +187,0 @@ }

36

src/lib/vimeo-background.js

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

this.player.on('timeupdate', this.onVideoTimeUpdate.bind(this));
// this.player.on('error', this.onVideoError.bind(this));

@@ -44,2 +45,6 @@ if (this.volume !== 1 && !this.muted) this.setVolume(this.volume);

onVideoError(event) {
console.error(event);
}
generatePlayerElement() {

@@ -64,3 +69,3 @@ const playerElement = document.createElement('iframe');

}
if (this.params.loop) {

@@ -143,4 +148,5 @@ src += '&loop=1&autopause=0';

this.dispatchEvent('video-background-time-update');
this.setDuration(event.duration);
if (this.duration && event.seconds >= this.duration) {
if (this.params['end-at'] && this.duration && event.seconds >= this.duration) {
this.onVideoEnded();

@@ -155,16 +161,24 @@ }

onVideoPlay(event) {
this.setDuration(event.duration);
if (!this.initialPlay) {
this.initialPlay = true;
this.playerElement.style.opacity = 1;
// gotta set loop manually, cause for some reason it's true by default
this.player.setLoop(this.params.loop);
//Hotfixing an issue that it automatically starts playing after buffering on the first load, sometimes, not always, for an unknown reason
if (!(this.params.autoplay && (this.params['always-play'] || this.isIntersecting))) {
return this.player.pause();
}
}
this.setDuration(event.duration);
const seconds = event.seconds;
if (self.params['start-at'] && seconds < self.params['start-at']) {
self.seekTo(self.params['start-at']);
if (this.params['start-at'] && seconds < this.params['start-at']) {
this.seekTo(this.params['start-at']);
}
if (self.duration && seconds >= self.duration) {
self.seekTo(self.params['start-at']);
if (this.duration && seconds >= this.duration) {
this.seekTo(this.params['start-at']);
}

@@ -186,7 +200,9 @@

seekTo(time) {
if (!this.player) return;
this.player.setCurrentTime(time);
this.dispatchEvent('video-background-seeked');
}
softPause() {
if (!this.playing || !this.player) return;
if (!this.playing || !this.player || this.currentState === 'paused') return;
this.player.pause();

@@ -196,3 +212,3 @@ }

softPlay() {
if (!this.playing || !this.player) return;
if (!this.player || this.currentState === 'playing') return;
this.player.play();

@@ -199,0 +215,0 @@ }

73

src/lib/youtube-background.js

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

'onReady': this.onVideoPlayerReady.bind(this),
'onStateChange': this.onVideoStateChange.bind(this)
'onStateChange': this.onVideoStateChange.bind(this),
// 'onError': this.onVideoError.bind(this)
}

@@ -59,2 +60,6 @@ });

onVideoError(event) {
console.error(event);
}
injectScript() {

@@ -130,6 +135,8 @@ if (window.hasOwnProperty('YT') || document.querySelector('script[src="https://www.youtube.com/player_api"]')) return

this.percentComplete = this.timeToPercentage(this.currentTime);
if (this.duration && this.currentTime >= this.duration) {
if (this.params['end-at'] && this.duration && this.currentTime >= this.duration) {
this.currentState = 'ended';
this.dispatchEvent('video-background-state-change');
this.onVideoEnded();
this.stopTimeUpdateTimer();
return;
}

@@ -155,5 +162,3 @@ this.dispatchEvent('video-background-time-update');

if (this.currentState === 'ended') {
this.onVideoEnded();
}
if (this.currentState === 'ended') this.onVideoEnded();

@@ -165,17 +170,5 @@ if (this.currentState === 'notstarted' && this.params.autoplay) {

if (this.currentState === 'playing') {
if (!this.initialPlay) {
this.initialPlay = true;
this.playerElement.style.opacity = 1;
}
if (!this.duration) {
this.setDuration(this.player.getDuration());
}
this.dispatchEvent('video-background-play');
this.startTimeUpdateTimer();
} else {
this.dispatchEvent('video-background-pause');
this.stopTimeUpdateTimer();
}
if (this.currentState === 'playing') this.onVideoPlay();
if (this.currentState === 'paused') this.onVideoPause();

@@ -185,6 +178,34 @@ this.dispatchEvent('video-background-state-change');

onVideoPlay() {
if (!this.initialPlay) {
this.initialPlay = true;
this.playerElement.style.opacity = 1;
}
const seconds = this.player.getCurrentTime();
if (this.params['start-at'] && seconds < this.params['start-at'] ) {
this.seekTo(this.params['start-at']);
}
if (this.duration && seconds >= this.duration) {
this.seekTo(this.params['start-at']);
}
if (!this.duration) {
this.setDuration(this.player.getDuration());
}
this.dispatchEvent('video-background-play');
this.startTimeUpdateTimer();
}
onVideoPause() {
this.dispatchEvent('video-background-pause');
this.stopTimeUpdateTimer();
}
onVideoEnded() {
this.dispatchEvent('video-background-ended');
if (!this.params.loop) return this.player.pause();
if (!this.params.loop) return this.pause();
this.seekTo(this.params['start-at']);

@@ -199,7 +220,9 @@ this.player.playVideo();

seekTo(seconds, allowSeekAhead = true) {
if (!this.player) return;
this.player.seekTo(seconds, allowSeekAhead);
this.dispatchEvent('video-background-seeked');
}
softPause() {
if (!this.playing || !this.player) return;
if (!this.playing || !this.player || this.currentState === 'paused') return;
this.player.pauseVideo();

@@ -209,3 +232,3 @@ }

softPlay() {
if (!this.playing || !this.player) return;
if (!this.player || this.currentState === 'playing') return;
this.player.playVideo();

@@ -218,5 +241,2 @@ }

if (this.params['start-at'] && this.player.getCurrentTime() < this.params['start-at'] ) {
this.seekTo(this.params['start-at']);
}
this.player.playVideo();

@@ -226,2 +246,3 @@ }

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

@@ -228,0 +249,0 @@ this.player.pauseVideo();

13

src/video-backgrounds.js

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

}
document.addEventListener('visibilitychange', this.onVisibilityChange.bind(this));
}
onVisibilityChange() {
if (document.hidden) return;
for (let k in this.index) {
const instance = this.index[k];
if (instance.shouldPlay()) {
instance.softPlay();
}
}
}
add(element, params) {

@@ -74,0 +87,0 @@ if (!element) return;

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