1class s extends HTMLElement{constructor(){super(),this.isIframeLoaded=!1,this.isPlaylistThumbnailLoaded=!1,this.setupDom()}static get observedAttributes(){return["videoid","playlistid","videoplay","videotitle"]}connectedCallback(){this.addEventListener("pointerover",()=>s.warmConnections(this),{once:!0}),this.addEventListener("click",()=>this.addIframe())}get videoId(){return encodeURIComponent(this.getAttribute("videoid")||"")}set videoId(t){this.setAttribute("videoid",t)}get playlistId(){return encodeURIComponent(this.getAttribute("playlistid")||"")}set playlistId(t){this.setAttribute("playlistid",t)}get videoTitle(){return this.getAttribute("videotitle")||"Video"}set videoTitle(t){this.setAttribute("videotitle",t)}get videoPlay(){return this.getAttribute("videoplay")||"Play"}set videoPlay(t){this.setAttribute("videoplay",t)}get videoStartAt(){return this.getAttribute("videoStartAt")||"0"}get autoLoad(){return this.hasAttribute("autoload")}get autoPause(){return this.hasAttribute("autopause")}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(t){this.setAttribute("params",t)}set posterQuality(t){this.setAttribute("posterquality",t)}get disableNoscript(){return this.hasAttribute("disablenoscript")}setupDom(){const t=this.attachShadow({mode:"open"});let e="";window.liteYouTubeNonce&&(e=`nonce="${window.liteYouTubeNonce}"`),t.innerHTML=` 2 <style ${e}> 3 :host { 4 --aspect-ratio: var(--lite-youtube-aspect-ratio, 16 / 9); 5 --aspect-ratio-short: var(--lite-youtube-aspect-ratio-short, 9 / 16); 6 --frame-shadow-visible: var(--lite-youtube-frame-shadow-visible, yes); 7 contain: content; 8 display: block; 9 position: relative; 10 width: 100%; 11 aspect-ratio: var(--aspect-ratio); 12 } 13 14 @media (max-width: 40em) { 15 :host([short]) { 16 aspect-ratio: var(--aspect-ratio-short); 17 } 18 } 19 20 #frame, #fallbackPlaceholder, iframe { 21 position: absolute; 22 width: 100%; 23 height: 100%; 24 left: 0; 25 top: 0; 26 } 27 28 #frame { 29 cursor: pointer; 30 } 31 32 #fallbackPlaceholder, slot[name=image]::slotted(*) { 33 object-fit: cover; 34 width: 100%; 35 height: 100%; 36 } 37 38 @container style(--frame-shadow-visible: yes) { 39 #frame::before { 40 content: ''; 41 display: block; 42 position: absolute; 43 top: 0; 44 background-image: linear-gradient(180deg, #111 -20%, transparent 90%); 45 height: 60px; 46 width: 100%; 47 z-index: 1; 48 } 49 } 50 51 #playButton { 52 width: 68px; 53 height: 48px; 54 background-color: transparent; 55 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>'); 56 z-index: 1; 57 border: 0; 58 border-radius: inherit; 59 } 60 61 #playButton:before { 62 content: ''; 63 border-style: solid; 64 border-width: 11px 0 11px 19px; 65 border-color: transparent transparent transparent #fff; 66 } 67 68 #playButton, 69 #playButton:before { 70 position: absolute; 71 top: 50%; 72 left: 50%; 73 transform: translate3d(-50%, -50%, 0); 74 cursor: inherit; 75 } 76 77 /* Post-click styles */ 78 .activated { 79 cursor: unset; 80 } 81 82 #frame.activated::before, 83 #frame.activated > #playButton { 84 display: none; 85 } 86 </style> 87 <div id="frame"> 88 <picture> 89 <slot name="image"> 90 <source id="webpPlaceholder" type="image/webp"> 91 <source id="jpegPlaceholder" type="image/jpeg"> 92 <img id="fallbackPlaceholder" referrerpolicy="origin" loading="lazy"> 93 </slot> 94 </picture> 95 <button id="playButton" part="playButton"></button> 96 </div> 97 `,this.domRefFrame=t.querySelector("#frame"),this.domRefImg={fallback:t.querySelector("#fallbackPlaceholder"),webp:t.querySelector("#webpPlaceholder"),jpeg:t.querySelector("#jpegPlaceholder")},this.domRefPlayButton=t.querySelector("#playButton")}setupComponent(){this.shadowRoot.querySelector("slot[name=image]").assignedNodes().length===0&&this.initImagePlaceholder(),this.domRefPlayButton.setAttribute("aria-label",`${this.videoPlay}: ${this.videoTitle}`),this.setAttribute("title",`${this.videoPlay}: ${this.videoTitle}`),(this.autoLoad||this.isYouTubeShort()||this.autoPause)&&this.initIntersectionObserver(),this.disableNoscript||this.injectSearchNoScript()}attributeChangedCallback(t,e,i){e!==i&&(t==="playlistid"&&e!==null&&e!==i&&(this.isPlaylistThumbnailLoaded=!1),this.setupComponent(),this.domRefFrame.classList.contains("activated")&&(this.domRefFrame.classList.remove("activated"),this.shadowRoot.querySelector("iframe").remove(),this.isIframeLoaded=!1))}injectSearchNoScript(){const t=document.createElement("noscript");this.prepend(t),t.innerHTML=this.generateIframe()}generateIframe(t=!1){let e=t?0:1,i=this.autoPause?"&enablejsapi=1":"";const o=this.noCookie?"-nocookie":"";let a;return this.playlistId?a=`?listType=playlist&list=${this.playlistId}&`:a=`${this.videoId}?`,this.isYouTubeShort()&&(this.params=`loop=1&mute=1&modestbranding=1&playsinline=1&rel=0&enablejsapi=1&playlist=${this.videoId}`,e=1),` 98<iframe credentialless frameborder="0" title="${this.videoTitle}"
99 referrerpolicy="strict-origin-when-cross-origin" 100 allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen 101 src="https://www.youtube${o}.com/embed/${a}autoplay=${e}${i}&${this.params}" 102></iframe>`}addIframe(t=!1){if(!this.isIframeLoaded){const e=this.generateIframe(t);this.domRefFrame.insertAdjacentHTML("beforeend",e),this.domRefFrame.classList.add("activated"),this.isIframeLoaded=!0,this.attemptShortAutoPlay(),this.dispatchEvent(new CustomEvent("liteYoutubeIframeLoaded",{detail:{videoId:this.videoId},bubbles:!0,cancelable:!0}))}}initImagePlaceholder(){var t,e;this.playlistId&&!this.videoId?this.loadPlaylistThumbnail():this.testPosterImage(),this.domRefImg.fallback.setAttribute("aria-label",`${this.videoPlay}: ${this.videoTitle}`),(e=(t=this.domRefImg)==null?void 0:t.fallback)==null||e.setAttribute("alt",`${this.videoPlay}: ${this.videoTitle}`)}async loadPlaylistThumbnail(){if(!this.isPlaylistThumbnailLoaded){this.isPlaylistThumbnailLoaded=!0;try{const t=`https://www.youtube.com/oembed?url=https://www.youtube.com/playlist?list=${this.playlistId}&format=json`,e=await fetch(t);if(!e.ok)throw new Error(`Failed to fetch playlist thumbnail: ${e.status}`);const i=await e.json();if(i.thumbnail_url){const o=i.thumbnail_url,a=o.match(/\/vi\/([^\/]+)\//);if(a){const r=a[1];this.loadThumbnailImages(r)}else this.domRefImg.fallback.src=o,this.domRefImg.fallback.loading=this.posterLoading}}catch(t){console.warn("Failed to load playlist thumbnail:",t)}}}loadThumbnailImages(t){const e=`https://i.ytimg.com/vi_webp/${t}/${this.posterQuality}.webp`;this.domRefImg.webp.srcset=e;const i=`https://i.ytimg.com/vi/${t}/${this.posterQuality}.jpg`;this.domRefImg.jpeg.srcset=i,this.domRefImg.fallback.src=i,this.domRefImg.fallback.loading=this.posterLoading}async testPosterImage(){setTimeout(()=>{const t=`https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`,e=new Image;e.fetchPriority="low",e.referrerPolicy="origin",e.src=t,e.onload=async i=>{const o=i.target;(o==null?void 0:o.naturalHeight)==90&&(o==null?void 0:o.naturalWidth)==120&&(this.posterQuality="hqdefault"),this.loadThumbnailImages(this.videoId)}},100)}initIntersectionObserver(){const t={root:null,rootMargin:"0px",threshold:0};new IntersectionObserver((i,o)=>{i.forEach(a=>{a.isIntersecting&&!this.isIframeLoaded&&(s.warmConnections(this),this.addIframe(!0),o.unobserve(this))})},t).observe(this),this.autoPause&&new IntersectionObserver((o,a)=>{o.forEach(r=>{var l,n;r.intersectionRatio!==1&&((n=(l=this.shadowRoot.querySelector("iframe"))==null?void 0:l.contentWindow)==null||n.postMessage('{"event":"command","func":"pauseVideo","args":""}',"*"))})},{threshold:1}).observe(this)}attemptShortAutoPlay(){this.isYouTubeShort()&&setTimeout(()=>{var t,e;(e=(t=this.shadowRoot.querySelector("iframe"))==null?void 0:t.contentWindow)==null||e.postMessage('{"event":"command","func":"playVideo","args":""}',"*")},2e3)}isYouTubeShort(){return this.getAttribute("short")===""&&window.matchMedia("(max-width: 40em)").matches}static addPrefetch(t,e){const i=document.createElement("link");i.rel=t,i.href=e,i.crossOrigin="true",document.head.append(i)}static warmConnections(t){s.isPreconnected||window.liteYouTubeIsPreconnected||(s.addPrefetch("preconnect","https://i.ytimg.com/"),s.addPrefetch("preconnect","https://s.ytimg.com"),t.noCookie?s.addPrefetch("preconnect","https://www.youtube-nocookie.com"):(s.addPrefetch("preconnect","https://www.youtube.com"),s.addPrefetch("preconnect","https://www.google.com"),s.addPrefetch("preconnect","https://googleads.g.doubleclick.net"),s.addPrefetch("preconnect","https://static.doubleclick.net")),s.isPreconnected=!0,window.liteYouTubeIsPreconnected=!0)}}s.isPreconnected=!1;customElements.define("lite-youtube",s);export{s as LiteYTEmbed};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.