@vueframe/lite-vimeo
Version:
@vueframe/lite-vimeo
1 lines • 1.99 kB
JavaScript
class LiteVimeo extends(globalThis.HTMLElement??class{}){static _warmConnections(){LiteVimeo.preconnected||(LiteVimeo.preconnected=!0,addPrefetch("preconnect","https://player.vimeo.com"),addPrefetch("preconnect","https://i.vimeocdn.com"),addPrefetch("preconnect","https://f.vimeocdn.com"),addPrefetch("preconnect","https://fresnel.vimeocdn.com"))}connectedCallback(){this.videoId=this.getAttribute("videoid");let{width:e,height:t}=getThumbnailDimensions(this.getBoundingClientRect()),i=window.devicePixelRatio||1;i>=2&&(i*=.75),e=Math.round(e*i),t=Math.round(t*i);let n=this.querySelector(".ltv-playbtn");this.playLabel=n&&n.textContent.trim()||this.getAttribute("playlabel")||"Play video",n||(n=document.createElement("button"),n.type="button",n.setAttribute("aria-label",this.playLabel),n.classList.add("ltv-playbtn"),this.append(n)),n.removeAttribute("href"),this.addEventListener("pointerover",LiteVimeo._warmConnections,{once:!0}),this.addEventListener("click",this.addIframe)}getParams(){const e=new URLSearchParams(this.getAttribute("params")||[]);return e.append("autoplay","1"),e}addIframe(){if(this.classList.contains("ltv-activated"))return;this.classList.add("ltv-activated");const e=document.createElement("iframe");e.width=640,e.height=360,e.setAttribute("frameborder","0"),e.title=this.playLabel,e.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",e.allowFullscreen=!0,e.src=`https://player.vimeo.com/video/${encodeURIComponent(this.videoId)}?${this.getParams().toString()}`,this.append(e),e.addEventListener("load",e.focus,{once:!0})}}function addPrefetch(e,t,i){const n=document.createElement("link");n.rel=e,n.href=t,i&&(n.as=i),n.crossorigin=!0,document.head.append(n)}function getThumbnailDimensions({width:e,height:t}){let i=e,n=t;return i%320!=0&&(i=100*Math.ceil(e/100),n=Math.round(i/e*t)),{width:i,height:n}}globalThis.customElements&&!globalThis.customElements.get("lite-vimeo")&&globalThis.customElements.define("lite-vimeo",LiteVimeo);