youtube-background - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

jquery.youtube-background.js

@@ -1,2 +0,2 @@
-/* youtube-background v1.1.2 | https://github.com/stamat/youtube-background | MIT License */
+/* youtube-background v1.1.3 | https://github.com/stamat/youtube-background | MIT License */
 (() => {
@@ -188,3 +188,3 @@ // src/lib/buttons.js
   var SuperVideoBackground = class {
-    constructor(elem, params, id, uid, type) {
+    constructor(elem, params, id, uid, type, factoryInstance) {
       if (!id)
@@ -195,2 +195,3 @@ return;
       this.id = id;
+      this.factoryInstance = factoryInstance;
       this.element = elem;
@@ -202,3 +203,3 @@ this.playerElement = null;
       this.isIntersecting = false;
-      this.playing = false;
+      this.paused = false;
       this.muted = false;
@@ -239,3 +240,2 @@ this.currentState = "notstarted";
       this.params.resolution_mod = parseResolutionString(this.params.resolution);
-      this.playing = false;
       this.muted = this.params.muted;
@@ -256,5 +256,5 @@ this.volume = this.params.volume;
           innerHtml: '<i class="fa"></i>',
-          initialState: !this.params.autoplay,
+          initialState: !this.paused,
           stateClassName: "paused",
-          condition_parameter: "autoplay",
+          condition_parameter: "paused",
           stateChildClassNames: ["fa-pause-circle", "fa-play-circle"],
@@ -345,3 +345,3 @@ actions: ["play", "pause"]
         if (this.params["poster"])
-          wrapper_styles["background-image"] = this.params["poster"];
+          wrapper_styles["background-image"] = `url(${this.params["poster"]})`;
         wrapper_styles["background-size"] = "cover";
@@ -373,3 +373,3 @@ wrapper_styles["background-repeat"] = "no-repeat";
       if (!this.params["load-background"])
-        ;
+        return;
       if (!id)
@@ -440,3 +440,3 @@ return;
         return;
-      document.addEventListener("touchstart", () => {
+      const forceAutoplay = function() {
         if (!this.initialPlay && this.params.autoplay && this.params.muted) {
@@ -448,3 +448,4 @@ this.softPlay();
         }
-      }, { once: true });
+      };
+      document.addEventListener("touchstart", forceAutoplay.bind(this), { once: true });
     }
@@ -485,4 +486,4 @@ parseProperties(params, defaults, element, attr_prefix) {
   var YoutubeBackground = class extends SuperVideoBackground {
-    constructor(elem, params, id, uid) {
-      super(elem, params, id, uid, "youtube");
+    constructor(elem, params, id, uid, factoryInstance) {
+      super(elem, params, id, uid, "youtube", factoryInstance);
       if (!id)
@@ -649,4 +650,4 @@ return;
     onVideoPause() {
+      this.stopTimeUpdateTimer();
       this.dispatchEvent("video-background-pause");
-      this.stopTimeUpdateTimer();
     }
@@ -670,4 +671,5 @@ onVideoEnded() {
     softPause() {
-      if (!this.playing || !this.player || this.currentState === "paused")
+      if (!this.player || this.currentState === "paused")
         return;
+      this.stopTimeUpdateTimer();
       this.player.pauseVideo();
@@ -683,3 +685,3 @@ }
         return;
-      this.playing = true;
+      this.paused = false;
       this.player.playVideo();
@@ -690,3 +692,4 @@ }
         return;
-      this.playing = false;
+      this.paused = true;
+      this.stopTimeUpdateTimer();
       this.player.pauseVideo();
@@ -728,4 +731,4 @@ }
   var VimeoBackground = class extends SuperVideoBackground {
-    constructor(elem, params, id, uid) {
-      super(elem, params, id, uid, "vimeo");
+    constructor(elem, params, id, uid, factoryInstance) {
+      super(elem, params, id, uid, "vimeo", factoryInstance);
       if (!id)
@@ -889,3 +892,3 @@ return;
     softPause() {
-      if (!this.playing || !this.player || this.currentState === "paused")
+      if (!this.player || this.currentState === "paused")
         return;
@@ -902,3 +905,3 @@ this.player.pause();
         return;
-      this.playing = true;
+      this.paused = false;
       this.player.play();
@@ -909,3 +912,3 @@ }
         return;
-      this.playing = false;
+      this.paused = true;
       this.player.pause();
@@ -947,4 +950,4 @@ }
   var VideoBackground = class extends SuperVideoBackground {
-    constructor(elem, params, vid_data, uid) {
-      super(elem, params, vid_data.link, uid, "video");
+    constructor(elem, params, vid_data, uid, factoryInstance) {
+      super(elem, params, vid_data.link, uid, "video", factoryInstance);
       if (!vid_data || !vid_data.link)
@@ -1089,3 +1092,3 @@ return;
     softPause() {
-      if (!this.playing || !this.player || this.currentState === "paused")
+      if (!this.player || this.currentState === "paused")
         return;
@@ -1102,3 +1105,3 @@ this.player.pause();
         return;
-      this.playing = true;
+      this.paused = false;
       this.player.play();
@@ -1109,3 +1112,3 @@ }
         return;
-      this.playing = false;
+      this.paused = true;
       this.player.pause();
@@ -1163,3 +1166,3 @@ }
               try {
-                if (self.index[uid].player && self.index[uid].params.autoplay)
+                if (self.index[uid].player && !self.index[uid].paused)
                   self.index[uid].softPlay();
@@ -1234,11 +1237,11 @@ } catch (e) {
         case "YOUTUBE":
-          const yb = new YoutubeBackground(element, params, vid_data.id, uid);
+          const yb = new YoutubeBackground(element, params, vid_data.id, uid, this);
           this.index[uid] = yb;
           break;
         case "VIMEO":
-          const vm = new VimeoBackground(element, params, vid_data.id, uid);
+          const vm = new VimeoBackground(element, params, vid_data.id, uid, this);
           this.index[uid] = vm;
           break;
         case "VIDEO":
-          const vid = new VideoBackground(element, params, vid_data, uid);
+          const vid = new VideoBackground(element, params, vid_data, uid, this);
           this.index[uid] = vid;
@@ -1245,0 +1248,0 @@ break;

jquery.youtube-background.min.js

@@ -1,2 +0,2 @@
-/* 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})();
+/* youtube-background v1.1.3 | 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,r){if(!i)return;this.is_mobile=U(),this.type=a,this.id=i,this.factoryInstance=r,this.element=t,this.playerElement=null,this.uid=s,this.element.setAttribute("data-vbg-uid",s),this.buttons={},this.isIntersecting=!1,this.paused=!1,this.muted=!1,this.currentState="notstarted",this.initialPlay=!1,this.initialVolume=!1,this.volume=1,this.params={};const n={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,n,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.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.paused,stateClassName:"paused",condition_parameter:"paused",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"]=`url(${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(){if(!this.params["force-on-low-battery"]||!this.is_mobile&&this.params.mobile)return;const t=function(){!this.initialPlay&&this.params.autoplay&&this.params.muted&&(this.softPlay(),!this.isIntersecting&&!this.params["always-play"]&&this.softPause())};document.addEventListener("touchstart",t.bind(this),{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,a){super(t,e,i,s,"youtube",a),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.stopTimeUpdateTimer(),this.dispatchEvent("video-background-pause")}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.player||this.currentState==="paused"||(this.stopTimeUpdateTimer(),this.player.pauseVideo())}softPlay(){!this.player||this.currentState==="playing"||this.player.playVideo()}play(){this.player&&(this.paused=!1,this.player.playVideo())}pause(){this.player&&(this.paused=!0,this.stopTimeUpdateTimer(),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,a){super(t,e,i,s,"vimeo",a),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.player||this.currentState==="paused"||this.player.pause()}softPlay(){!this.player||this.currentState==="playing"||this.player.play()}play(){this.player&&(this.paused=!1,this.player.play())}pause(){this.player&&(this.paused=!0,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,a){super(t,e,i.link,s,"video",a),!(!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.player||this.currentState==="paused"||this.player.pause()}softPlay(){!this.player||this.currentState==="playing"||this.player.play()}play(){this.player&&(this.paused=!1,this.player.play())}pause(){this.player&&(this.paused=!0,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].paused&&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);this.index[a]=r;break;case"VIMEO":const n=new g(t,e,s.id,a,this);this.index[a]=n;break;case"VIDEO":const o=new B(t,e,s,a,this);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})();

package.json

 {
   "name": "youtube-background",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "ESM / jQuery plugin for creating video backgrounds from YouTube, Vimeo or video file links.",
@@ -5,0 +5,0 @@ "main": "jquery.youtube-background.js",

src/lib/controls.js

@@ -7,7 +7,8 @@
     this.element = element;
+    if (this.element.hasAttribute('data-target-uid')) return;
     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.targetSelector) this.targetElem = document.querySelector(this.targetSelector);
+    if (!this.targetSelector && vbgInstance) this.targetElem = vbgInstance.element;
     if (!this.targetElem) return;
@@ -55,21 +56,22 @@
     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;
+      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;
+    if (this.progressElem) this.progressElem.value = value;
+    if (this.inputElem) this.inputElem.value = value;
   }
 }
 
-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;
+export class VideoBackgroundGroup {
+  constructor(selector, videoBackgroundSelector, videoBackgroundFactoryInstance) {
+    this.element = selector;
+    if (typeof this.element === 'string') this.element = document.querySelector(selector);
+    if (!this.element) return;
+    this.elements = this.element.querySelectorAll(videoBackgroundSelector || '[data-vbg]');
+    if (!this.elements.length) return;
 
-    this.factoryInstance = factoryInstance;
+    this.videoBackgroundFactoryInstance = videoBackgroundFactoryInstance;
     this.stack = [];
@@ -80,3 +82,3 @@ this.map = new Map();
       const element = this.elements[i];
-      if (!element.hasAttribute('data-vbg-uid')) this.factoryInstance.add(element);
+      if (!element.hasAttribute('data-vbg-uid') && this.videoBackgroundFactoryInstance) this.videoBackgroundFactoryInstance.add(element);
       this.stack.push(element);
@@ -88,3 +90,3 @@ this.map.set(element, i);
         this.currentElement = element;
-        this.currentInstance = this.factoryInstance.get(element);
+        if (this.videoBackgroundFactoryInstance) this.currentInstance = this.videoBackgroundFactoryInstance.get(element);
       }
@@ -94,10 +96,25 @@ element.addEventListener('video-background-ended', this.onVideoEnded.bind(this));
       element.addEventListener('video-background-pause', this.onVideoPause.bind(this));
+      element.addEventListener('video-background-ready', this.onVideoReady.bind(this));
+      element.addEventListener('video-background-state-change', this.setVideoBackgroundFactoryInstance.bind(this));
+      element.addEventListener('video-background-time-update', this.setVideoBackgroundFactoryInstance.bind(this));
     }
   }
 
-  onVideoPause(event) {
+  setVideoBackgroundFactoryInstance(event) {
+    if (this.videoBackgroundFactoryInstance) return;
+    this.videoBackgroundFactoryInstance = event.detail.factoryInstance;
+    if (!this.currentInstance) this.currentInstance = this.videoBackgroundFactoryInstance.get(this.currentElement);
+  }
+
+  onVideoReady(event) {
+    if (this.stack[this.current] !== event.detail.element) return;
+    this.setVideoBackgroundFactoryInstance(event);
+    // console.log('ready', event.detail.element, event.detail.currentState);
+    if (event.detail.currentState !== 'playing') event.detail.play();
+  }
+
+  onVideoPause(event) {;
+    this.setVideoBackgroundFactoryInstance(event);
     const stackIndex = this.map.get(event.detail.element);
     if (stackIndex === this.current) return;
-
-    this.levelSeekBars();
   }
@@ -108,8 +125,8 @@
       if (i === this.current) continue;
-      const seekBarElem = this.getSeekBar(this.factoryInstance.get(this.stack[i]));
+      const seekBarElem = this.getSeekBar(this.videoBackgroundFactoryInstance.get(this.stack[i]));
       if (!seekBarElem) continue;
       if (i < this.current) {
-        requestAnimationFrame(() => this.setProgress(seekBarElem, 100));
+        this.setProgress(seekBarElem, 100);
       } else {
-        requestAnimationFrame(() => this.setProgress(seekBarElem, 0));
+        this.setProgress(seekBarElem, 0);
       }
@@ -144,4 +161,5 @@ }
     if (index < 0) index = this.stack.length - 1;
+    const previousInstance = this.videoBackgroundFactoryInstance.get(this.stack[previous]);
     this.current = index;
-    this.currentInstance = this.factoryInstance.get(this.stack[this.current]);
+    this.currentInstance = this.videoBackgroundFactoryInstance.get(this.stack[this.current]);
     this.currentElement = this.stack[this.current];
@@ -151,14 +169,27 @@
     this.currentElement.style.display = 'block';
+
     if (!seek) {
-      const seekBarElem = this.getSeekBar(this.currentInstance);
-      if (seekBarElem) this.setProgress(seekBarElem, 0);
-      this.currentInstance.seek(0);
+        const seekBarElem = this.getSeekBar(this.currentInstance);
+        if (seekBarElem) this.setProgress(seekBarElem, 0);
+        this.currentInstance.seek(0);
     }
 
-    if (!this.currentInstance.playing) this.currentInstance.play();
+    setTimeout(() => {
+        if (this.currentInstance.currentState !== 'playing') this.currentInstance.play();
+    }, 100);
+    if (previousInstance && previousInstance.currentState !== 'paused') previousInstance.pause();
+
+    setTimeout(this.levelSeekBars.bind(this), 100);
+
+    if (index >= this.stack.length) this.dispatchEvent('video-background-group-forward-rewind');
+    if (index < 0) this.dispatchEvent('video-background-group-backward-rewind');
   }
 
+  dispatchEvent(name) {
+    this.element.dispatchEvent(new CustomEvent(name, { bubbles: true, detail: this }));
+  }
+
   onVideoEnded(event) {
     if (event.detail.element !== this.currentElement) return;
-    this.next()
+    this.next();
   }
@@ -168,2 +199,3 @@
     this.setCurrent(this.current + 1);
+    this.dispatchEvent('video-background-group-next');
   }
@@ -173,3 +205,34 @@
     this.setCurrent(this.current - 1);
+    this.dispatchEvent('video-background-group-previous');
   }
+
+  unmute() {
+    for (let i = 0; i < this.stack.length; i++) {
+      const instance = this.videoBackgroundFactoryInstance.get(this.stack[i]);
+      if (!instance) continue;
+      instance.unmute();
+    }
+
+    this.dispatchEvent('video-background-group-umnute');
+  }
+
+  mute() {
+    for (let i = 0; i < this.stack.length; i++) {
+      const instance = this.videoBackgroundFactoryInstance.get(this.stack[i]);
+      if (!instance) continue;
+      instance.mute();
+    }
+
+    this.dispatchEvent('video-background-group-mute');
+  }
+
+  pause() {
+    this.currentInstance.pause();
+    this.dispatchEvent('video-background-group-previous');
+  }
+
+  play() {
+    this.currentInstance.play();
+    this.dispatchEvent('video-background-group-previous');
+  }
 }
@@ -179,30 +242,30 @@
   constructor(playToggleElem, vbgInstance) {
-      if (!playToggleElem) return;
-      
-      this.element = playToggleElem;
-      this.targetSelector = this.element.getAttribute('data-target');
+    if (!playToggleElem) return;
+    
+    this.element = playToggleElem;
+    this.targetSelector = this.element.getAttribute('data-target');
 
-      if (!this.targetSelector) return;
-      this.active = false;
+    if (!this.targetSelector) return;
+    this.active = false;
 
-      if (this.element.hasAttribute('aria-checked')) {
-        this.active = this.element.getAttribute('aria-checked') === 'true';
-      } else {
-        this.element.setAttribute('aria-checked', this.active);
-      }
+    if (this.element.hasAttribute('aria-checked')) {
+      this.active = this.element.getAttribute('aria-checked') === 'true';
+    } else {
+      this.element.setAttribute('aria-checked', this.active);
+    }
 
-      this.element.setAttribute('role', 'switch');
+    this.element.setAttribute('role', 'switch');
 
-      this.targetElem = document.querySelector(this.targetSelector);
-      if (!this.targetElem) return;
+    this.targetElem = document.querySelector(this.targetSelector);
+    if (!this.targetElem) return;
 
-      if (vbgInstance) this.vbgInstance = vbgInstance;
+    if (vbgInstance) this.vbgInstance = vbgInstance;
 
-      this.targetElem.addEventListener('video-background-ready', this.onReady.bind(this));
-      this.targetElem.addEventListener('video-background-state-change', this.onStateChange.bind(this));
-      this.targetElem.addEventListener('video-background-play', this.onPlay.bind(this));
-      this.targetElem.addEventListener('video-background-pause', this.onPause.bind(this));
-      this.targetElem.addEventListener('video-background-destroyed', this.onDestroyed.bind(this));
+    this.targetElem.addEventListener('video-background-ready', this.onReady.bind(this));
+    this.targetElem.addEventListener('video-background-state-change', this.onStateChange.bind(this));
+    this.targetElem.addEventListener('video-background-play', this.onPlay.bind(this));
+    this.targetElem.addEventListener('video-background-pause', this.onPause.bind(this));
+    this.targetElem.addEventListener('video-background-destroyed', this.onDestroyed.bind(this));
 
-      this.element.addEventListener('click', this.onClick.bind(this));
+    this.element.addEventListener('click', this.onClick.bind(this));
   }
@@ -259,5 +322,5 @@
       if (this.element.hasAttribute('aria-checked')) {
-        this.active = this.element.getAttribute('aria-checked') === 'true';
+          this.active = this.element.getAttribute('aria-checked') === 'true';
       } else {
-        this.element.setAttribute('aria-checked', this.active);
+          this.element.setAttribute('aria-checked', this.active);
       }
@@ -264,0 +327,0 @@

src/lib/super-video-background.js

@@ -5,3 +5,3 @@ import { generateActionButton } from './buttons.js';
 export class SuperVideoBackground {
-  constructor(elem, params, id, uid, type) {
+  constructor(elem, params, id, uid, type, factoryInstance) {
     if (!id) return;
@@ -11,2 +11,3 @@ this.is_mobile = isMobile();
     this.id = id;
+    this.factoryInstance = factoryInstance;
 
@@ -21,3 +22,3 @@ this.element = elem;
 
-    this.playing = false;
+    this.paused = false; // user requested pause. used for blocking intersection softPlay
     this.muted = false;
@@ -64,3 +65,3 @@ this.currentState = 'notstarted';
     this.params.resolution_mod = parseResolutionString(this.params.resolution);
-    this.playing = false;
+
     this.muted = this.params.muted;
@@ -84,5 +85,5 @@
         innerHtml: '<i class="fa"></i>',
-        initialState: !this.params.autoplay,
+        initialState: !this.paused,
         stateClassName: 'paused',
-        condition_parameter: 'autoplay',
+        condition_parameter: 'paused',
         stateChildClassNames: ['fa-pause-circle', 'fa-play-circle'],
@@ -174,3 +175,3 @@ actions: ['play', 'pause']
       this.loadBackground(this.id);
-      if (this.params['poster']) wrapper_styles['background-image'] = this.params['poster'];
+      if (this.params['poster']) wrapper_styles['background-image'] = `url(${ this.params['poster'] })`;
       wrapper_styles['background-size'] = 'cover';
@@ -209,3 +210,3 @@ wrapper_styles['background-repeat'] = 'no-repeat';
   loadBackground(id) {
-    if (!this.params['load-background']);
+    if (!this.params['load-background']) return;
     if (!id) return;
@@ -274,3 +275,4 @@ if (this.type === 'youtube') this.element.style['background-image'] = `url(https://img.youtube.com/vi/${id}/hqdefault.jpg)`;
     if (!this.is_mobile && this.params.mobile) return;
-    document.addEventListener('touchstart', () => {
+
+    const forceAutoplay = function() {
       if (!this.initialPlay && this.params.autoplay && this.params.muted) {
@@ -283,3 +285,5 @@ this.softPlay();
       }
-    }, { once: true });
+    }
+    
+    document.addEventListener('touchstart', forceAutoplay.bind(this), { once: true });
   }
@@ -286,0 +290,0 @@

src/lib/video-background.js

@@ -5,4 +5,4 @@ import { SuperVideoBackground } from './super-video-background.js';
 export class VideoBackground extends SuperVideoBackground {
-  constructor(elem, params, vid_data, uid) {
-    super(elem, params, vid_data.link, uid, 'video');
+  constructor(elem, params, vid_data, uid, factoryInstance) {
+    super(elem, params, vid_data.link, uid, 'video', factoryInstance);
     if (!vid_data || !vid_data.link) return;
@@ -167,3 +167,3 @@ if (this.is_mobile && !this.params.mobile) return;
   softPause() {
-    if (!this.playing || !this.player || this.currentState === 'paused') return;
+    if (!this.player || this.currentState === 'paused') return;
     this.player.pause();
@@ -179,3 +179,3 @@ }
     if (!this.player) return;
-    this.playing = true;
+    this.paused = false;
 
@@ -187,3 +187,3 @@ this.player.play();
     if (!this.player) return;
-    this.playing = false;
+    this.paused = true;
   
@@ -190,0 +190,0 @@ this.player.pause();

src/lib/vimeo-background.js

@@ -5,4 +5,4 @@ import { SuperVideoBackground } from './super-video-background.js';
 export class VimeoBackground extends SuperVideoBackground {
-  constructor(elem, params, id, uid) {
-    super(elem, params, id, uid, 'vimeo');
+  constructor(elem, params, id, uid, factoryInstance) {
+    super(elem, params, id, uid, 'vimeo', factoryInstance);
     if (!id) return;
@@ -202,3 +202,3 @@ if (this.is_mobile && !this.params.mobile) return;
   softPause() {
-    if (!this.playing || !this.player || this.currentState === 'paused') return;
+    if (!this.player || this.currentState === 'paused') return;
     this.player.pause();
@@ -214,3 +214,3 @@ }
     if (!this.player) return;
-    this.playing = true;
+    this.paused = false;
     
@@ -222,3 +222,3 @@ this.player.play();
     if (!this.player) return;
-    this.playing = false;
+    this.paused = true;
   
@@ -225,0 +225,0 @@ this.player.pause();

src/lib/youtube-background.js

@@ -5,4 +5,4 @@ import { SuperVideoBackground } from './super-video-background.js';
 export class YoutubeBackground extends SuperVideoBackground {
-  constructor(elem, params, id, uid) {
-    super(elem, params, id, uid, 'youtube');
+  constructor(elem, params, id, uid, factoryInstance) {
+    super(elem, params, id, uid, 'youtube', factoryInstance);
 
@@ -198,4 +198,4 @@ if (!id) return;
   onVideoPause() {
+    this.stopTimeUpdateTimer();
     this.dispatchEvent('video-background-pause');
-    this.stopTimeUpdateTimer();
   }
@@ -222,3 +222,4 @@
   softPause() {
-    if (!this.playing || !this.player || this.currentState === 'paused') return;
+    if (!this.player || this.currentState === 'paused') return;
+    this.stopTimeUpdateTimer();
     this.player.pauseVideo();
@@ -234,3 +235,3 @@ }
     if (!this.player) return;
-    this.playing = true;
+    this.paused = false;
   
@@ -242,3 +243,4 @@ this.player.playVideo();
     if (!this.player) return;
-    this.playing = false;
+    this.paused = true;
+    this.stopTimeUpdateTimer();
     this.player.pauseVideo();
@@ -245,0 +247,0 @@ }

src/video-backgrounds.js

@@ -27,3 +27,3 @@ import { YoutubeBackground } from './lib/youtube-background.js';
             try {
-              if (self.index[uid].player && self.index[uid].params.autoplay) self.index[uid].softPlay();
+              if (self.index[uid].player && !self.index[uid].paused) self.index[uid].softPlay();
             } catch (e) {
@@ -106,11 +106,11 @@ // console.log(e);
       case 'YOUTUBE':
-        const yb = new YoutubeBackground(element, params, vid_data.id, uid);
+        const yb = new YoutubeBackground(element, params, vid_data.id, uid, this);
         this.index[uid] = yb;
         break;
       case 'VIMEO':
-        const vm = new VimeoBackground(element, params, vid_data.id, uid);
+        const vm = new VimeoBackground(element, params, vid_data.id, uid, this);
         this.index[uid] = vm;
         break;
       case 'VIDEO':
-        const vid = new VideoBackground(element, params, vid_data, uid);
+        const vid = new VideoBackground(element, params, vid_data, uid, this);
         this.index[uid] = vid;
@@ -117,0 +117,0 @@ break;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

338736

increased by9.86%

Number of package files

26

increased by18.18%

Lines of code

3479

increased by22.85%

No dependency changes