https://taraba.tech/build/assets/initLiteYouTubePlayer-D8ehpFnl.js

1var e=class e extends HTMLElement{constructor(){super(),this.isIframeLoaded=!1,this.setupDom()}static get observedAttributes(){return[`videoid`,`playlistid`]}connectedCallback(){this.addEventListener(`pointerover`,e.warmConnections,{once:!0}),this.addEventListener(`click`,()=>this.addIframe())}stopVideo(){this.isIframeLoaded&&(this.shadowRoot.querySelector(`iframe`).remove(),this.domRefFrame.classList.remove(`activated`),this.isIframeLoaded=!1,this.shadowRoot.querySelector(`.img-title`).style.display=`block`)}get videoId(){return encodeURIComponent(this.getAttribute(`videoid`)||``)}set videoId(e){this.setAttribute(`videoid`,e)}get playlistId(){return encodeURIComponent(this.getAttribute(`playlistid`)||``)}set playlistId(e){this.setAttribute(`playlistid`,e)}get videoTitle(){return this.getAttribute(`videotitle`)||`Video`}set videoTitle(e){this.setAttribute(`videotitle`,e)}get videoPlay(){return this.getAttribute(`videoPlay`)||`Play`}set videoPlay(e){this.setAttribute(`videoPlay`,e)}get videoStartAt(){return this.getAttribute(`videoStartAt`)||`0`}get autoLoad(){return this.hasAttribute(`autoload`)}get noCookie(){return this.hasAttribute(`nocookie`)}get posterQuality(){return this.getAttribute(`posterquality`)||`hqdefault`}get posterLoading(){return this.getAttribute(`posterloading`)||`lazy`}get params(){return`start=${this.videoStartAt}&${this.getAttribute(`params`)}`}set params(e){this.setAttribute(`params`,e)}setupDom(){let e=this.attachShadow({mode:`open`}),t=``;window.liteYouTubeNonce&&(t=`nonce="${window.liteYouTubeNonce}"`),e.innerHTML=`
2      <style ${t}>
3        :host {
4          contain: content;
5          display: block;
6          position: relative;
7          width: 100%;
8          padding-bottom: calc(100% / (16 / 9));
9        }
10
11        @media (max-width: 40em) {
12          :host([short]) {
13            padding-bottom: calc(100% / (9 / 16));
14          }
15        }
16
17        #frame, #fallbackPlaceholder, iframe {
18          position: absolute;
19          width: 100%;
20          height: 100%;
21          left: 0;
22        }
23
24        #frame {
25          cursor: pointer;
26        }
27
28        #fallbackPlaceholder {
29          object-fit: cover;
30        }
31
32        .img-title {
33            font-family: Roboto;
34            font-size: 20px;
35            position: absolute;
36            z-index: 1;
37            color: lightgray;
38            padding-left: 24px;
39            @media (max-width: 760px) {
40               margin-top: 10px;
41               font-size: 16px;
42               padding-left: 14px;
43            }
44        }
45
46        #frame::before {
47          content: '';
48          display: block;
49          position: absolute;
50          top: 0;
51          background-image: linear-gradient(180deg, #111 -20%, transparent 90%);
52          height: 60px;
53          width: 100%;
54          z-index: 1;
55        }
56
57        #playButton {
58          width: 68px;
59          height: 48px;
60          background-color: transparent;
61          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
62          z-index: 1;
63          border: 0;
64          border-radius: inherit;
65        }
66
67        #playButton:before {
68          content: '';
69          border-style: solid;
70          border-width: 11px 0 11px 19px;
71          border-color: transparent transparent transparent #fff;
72        }
73
74        #playButton,
75        #playButton:before {
76          position: absolute;
77          top: 50%;
78          left: 50%;
79          transform: translate3d(-50%, -50%, 0);
80          cursor: inherit;
81        }
82
83        /* Post-click styles */
84        .activated {
85          cursor: unset;
86        }
87
88        #frame.activated::before,
89        #frame.activated > #playButton {
90          display: none;
91        }
92      </style>
93      <div id="frame">
94        <picture>
95          <p class="img-title">${this.videoTitle}</p>
96          <source id="webpPlaceholder" type="image/webp">
97          <source id="jpegPlaceholder" type="image/jpeg">
98          <img id="fallbackPlaceholder" referrerpolicy="origin" loading="lazy">
99        </picture>
100        <button id="playButton"></button>
101      </div>
102    `,this.domRefFrame=e.querySelector(`#frame`),this.domRefImg={fallback:e.querySelector(`#fallbackPlaceholder`),webp:e.querySelector(`#webpPlaceholder`),jpeg:e.querySelector(`#jpegPlaceholder`)},this.domRefPlayButton=e.querySelector(`#playButton`)}setupComponent(){this.initImagePlaceholder(),this.domRefPlayButton.setAttribute(`aria-label`,`${this.videoPlay}: ${this.videoTitle}`),this.setAttribute(`title`,`${this.videoPlay}: ${this.videoTitle}`),(this.autoLoad||this.isYouTubeShort())&&this.initIntersectionObserver()}attributeChangedCallback(e,t,n){switch(e){case`videoid`:case`playlistid`:case`videoTitle`:case`videoPlay`:t!==n&&(this.setupComponent(),this.domRefFrame.classList.contains(`activated`)&&(this.domRefFrame.classList.remove(`activated`),this.shadowRoot.querySelector(`iframe`).remove(),this.isIframeLoaded=!1));break;default:break}}addIframe(e=!1){if(!this.isIframeLoaded){let t=+!e,n=this.noCookie?`-nocookie`:``,r;r=this.playlistId?`?listType=playlist&list=${this.playlistId}&`:`${this.videoId}?`,this.isYouTubeShort()&&(this.params=`loop=1&mute=1&modestbranding=1&playsinline=1&rel=0&enablejsapi=1&playlist=${this.videoId}`,t=1);let i=`
103<iframe frameborder="0" title="${this.videoTitle}"
104  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
105  src="https://www.youtube${n}.com/embed/${r}autoplay=${t}&${this.params}"
106></iframe>`;this.domRefFrame.insertAdjacentHTML(`beforeend`,i),this.domRefFrame.classList.add(`activated`),this.isIframeLoaded=!0,this.attemptShortAutoPlay(),this.shadowRoot.querySelector(`.img-title`).style.display=`none`,this.dispatchEvent(new CustomEvent(`liteYoutubeIframeLoaded`,{detail:{videoId:this.videoId},bubbles:!0,cancelable:!0}))}}initImagePlaceholder(){let e=`https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`,t=`https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;this.domRefImg.fallback.loading=this.posterLoading,this.domRefImg.webp.srcset=e,this.domRefImg.jpeg.srcset=t,this.domRefImg.fallback.src=t,this.domRefImg.fallback.setAttribute(`aria-label`,`${this.videoPlay}: ${this.videoTitle}`),this.domRefImg?.fallback?.setAttribute(`alt`,`${this.videoPlay}: ${this.videoTitle}`)}initIntersectionObserver(){new IntersectionObserver((t,n)=>{t.forEach(t=>{t.isIntersecting&&!this.isIframeLoaded&&(e.warmConnections(),this.addIframe(!0),n.unobserve(this))})},{root:null,rootMargin:`0px`,threshold:0}).observe(this)}attemptShortAutoPlay(){this.isYouTubeShort()&&setTimeout(()=>{this.shadowRoot.querySelector(`iframe`)?.contentWindow?.postMessage(`{"event":"command","func":"playVideo","args":""}`,`*`)},2e3)}isYouTubeShort(){return this.getAttribute(`short`)===``&&window.matchMedia(`(max-width: 40em)`).matches}static addPrefetch(e,t){let n=document.createElement(`link`);n.rel=e,n.href=t,n.crossOrigin=`true`,document.head.append(n)}static warmConnections(){e.isPreconnected||window.liteYouTubeIsPreconnected||(e.addPrefetch(`preconnect`,`https://i.ytimg.com/`),e.addPrefetch(`preconnect`,`https://s.ytimg.com`),e.addPrefetch(`preconnect`,`https://www.youtube.com`),e.addPrefetch(`preconnect`,`https://www.google.com`),e.addPrefetch(`preconnect`,`https://googleads.g.doubleclick.net`),e.addPrefetch(`preconnect`,`https://static.doubleclick.net`),e.isPreconnected=!0,window.liteYouTubeIsPreconnected=!0)}};e.isPreconnected=!1,customElements.define(`youtube-lite`,e);