1let LiteVimeoEmbed=(()=>{class e extends HTMLElement{constructor(){super(),this.iframeLoaded=!1,this.setupDom()}static get observedAttributes(){return["videoid"]}connectedCallback(){this.addEventListener("pointerover",e.warmConnections,{once:!0}),this.addEventListener("click",(()=>this.addIframe()))}get videoId(){return encodeURIComponent(this.getAttribute("videoid")||"")}set videoId(e){this.setAttribute("videoid",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("videoPlay")||"0s"}get videoHash(){return this.getAttribute("hash")||!1}set videoStartAt(e){this.setAttribute("videoPlay",e)}get autoLoad(){return this.hasAttribute("autoload")}set autoLoad(e){e?this.setAttribute("autoload",""):this.removeAttribute("autoload")}get autoPlay(){return this.hasAttribute("autoplay")}set autoPlay(e){e?this.setAttribute("autoplay","autoplay"):this.removeAttribute("autoplay")}setupDom(){this.attachShadow({mode:"open"}).innerHTML='\n <style>\n :host {\n contain: content;\n display: block;\n position: relative;\n width: 100%;\n padding-bottom: calc(100% / (16 / 9));\n }\n\n #frame, #fallbackPlaceholder, iframe {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n #frame {\n cursor: pointer;\n }\n\n #fallbackPlaceholder {\n object-fit: cover;\n }\n\n #frame::before {\n content: \'\';\n display: block;\n position: absolute;\n top: 0;\n background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);\n background-position: top;\n background-repeat: repeat-x;\n height: 60px;\n padding-bottom: 50px;\n width: 100%;\n transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);\n z-index: 1;\n }\n /* play button */\n .lvo-playbtn {\n width: 70px;\n height: 46px;\n background-color: #212121;\n z-index: 1;\n opacity: 0.8;\n border-radius: 10%;\n transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);\n border: 0;\n }\n #frame:hover .lvo-playbtn {\n background-color: rgb(98, 175, 237);\n opacity: 1;\n }\n /* play button triangle */\n .lvo-playbtn:before {\n content: \'\';\n border-style: solid;\n border-width: 11px 0 11px 19px;\n border-color: transparent transparent transparent #fff;\n }\n .lvo-playbtn,\n .lvo-playbtn:before {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate3d(-50%, -50%, 0);\n }\n\n /* Post-click styles */\n .lvo-activated {\n cursor: unset;\n }\n\n #frame.lvo-activated::before,\n .lvo-activated .lvo-playbtn {\n display: none;\n }\n </style>\n <div id="frame">\n <picture>\n <source id="webpPlaceholder" type="image/webp">\n <source id="jpegPlaceholder" type="image/jpeg">\n <img id="fallbackPlaceholder" referrerpolicy="origin">\n </picture>\n <button class="lvo-playbtn"></button>\n </div>\n ',this.domRefFrame=this.shadowRoot.querySelector("#frame"),this.domRefImg={fallback:this.shadowRoot.querySelector("#fallbackPlaceholder"),webp:this.shadowRoot.querySelector("#webpPlaceholder"),jpeg:this.shadowRoot.querySelector("#jpegPlaceholder")},this.domRefPlayButton=this.shadowRoot.querySelector(".lvo-playbtn")}setupComponent(){this.initImagePlaceholder(),this.domRefPlayButton.setAttribute("aria-label",`${this.videoPlay}: ${this.videoTitle}`),this.setAttribute("title",`${this.videoPlay}: ${this.videoTitle}`),this.autoLoad&&this.initIntersectionObserver()}attributeChangedCallback(e,t,i){if("videoid"===e)t!==i&&(this.setupComponent(),this.domRefFrame.classList.contains("lvo-activated")&&(this.domRefFrame.classList.remove("lvo-activated"),this.shadowRoot.querySelector("iframe").remove()))}addIframe(){if(!this.iframeLoaded){let e=this.autoLoad&&this.autoPlay||!this.autoLoad?"autoplay=1":"";this.videoHash&&(e.length>0?e+=`&h=${this.videoHash}`:e=`h=${this.videoHash}`);const t=`\n<iframe frameborder="0"\n allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" \n allowfullscreen src="${new URL(`/video/${this.videoId}?${e}&#t=${this.videoStartAt}`,"https://player.vimeo.com/")}"></iframe>`;this.domRefFrame.insertAdjacentHTML("beforeend",t),this.domRefFrame.classList.add("lvo-activated"),this.iframeLoaded=!0}}async initImagePlaceholder(){e.addPrefetch("preconnect","https://i.vimeocdn.com/");var t="",i="";if(1079777003==this.videoId)t="https://i.vimeocdn.com/video/2010231943-3810b7aae4617d0cac1c128dfe2ae902a10555b6e1cde9e79f2eae5819b4db16-d_1420x800.webp?mw=1100&mh=619&q=70",i="https://i.vimeocdn.com/video/2010231943-3810b7aae4617d0cac1c128dfe2ae902a10555b6e1cde9e79f2eae5819b4db16-d_1420x800.jpg?mw=1100&mh=619&q=70";else{let e=`https://vimeo.com/api/v2/video/${this.videoId}.json`,o=(await(await fetch(e)).json())[0].thumbnail_large,a=o.substr(o.lastIndexOf("/")+1).split("_")[0];t=`https://i.vimeocdn.com/video/${a}.webp?mw=1100&mh=619&q=70`,i=`https://i.vimeocdn.com/video/${a}.jpg?mw=1100&mh=619&q=70`}this.domRefImg.webp.srcset=t,this.domRefImg.jpeg.srcset=i,this.domRefImg.fallback.src=i,this.domRefImg.fallback.setAttribute("aria-label",`${this.videoPlay}: ${this.videoTitle}`),this.domRefImg.fallback.setAttribute("alt",`${this.videoPlay}: ${this.videoTitle}`)}initIntersectionObserver(){if("IntersectionObserver"in window&&"IntersectionObserverEntry"in window){new IntersectionObserver(((t,i)=>{t.forEach((t=>{t.isIntersecting&&!this.iframeLoaded&&(e.warmConnections(),this.addIframe(),i.unobserve(this))}))}),{root:null,rootMargin:"0px",threshold:0}).observe(this)}}static addPrefetch(e,t,i){const o=document.createElement("link");o.rel=e,o.href=t,i&&(o.as=i),o.crossOrigin="true",document.head.append(o)}static warmConnections(){e.preconnected||(e.addPrefetch("preconnect","https://f.vimeocdn.com"),e.addPrefetch("preconnect","https://player.vimeo.com"),e.addPrefetch("preconnect","https://i.vimeocdn.com"),e.preconnected=!0)}}return e.preconnected=!1,e})();export{LiteVimeoEmbed};
1customElements.define("lite-vimeo",LiteVimeoEmbed);
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.