2022-09-04 23:15:37 +00:00
|
|
|
class LiteYTEmbed extends HTMLElement{connectedCallback(){this.videoId=this.getAttribute('videoid');let playBtnEl=this.querySelector('.lty-playbtn');this.playLabel=(playBtnEl&&playBtnEl.textContent.trim())||this.getAttribute('playlabel')||'Play';if(!this.style.backgroundImage){this.style.backgroundImage=`url("https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg")`}
|
|
|
|
|
if(!playBtnEl){playBtnEl=document.createElement('button');playBtnEl.type='button';playBtnEl.classList.add('lty-playbtn');this.append(playBtnEl)}
|
|
|
|
|
if(!playBtnEl.textContent){const playBtnLabelEl=document.createElement('span');playBtnLabelEl.className='lyt-visually-hidden';playBtnLabelEl.textContent=this.playLabel;playBtnEl.append(playBtnLabelEl)}
|
|
|
|
|
this.addEventListener('pointerover',LiteYTEmbed.warmConnections,{once:!0});this.addEventListener('click',this.addIframe)}
|
|
|
|
|
static addPrefetch(kind,url,as){const linkEl=document.createElement('link');linkEl.rel=kind;linkEl.href=url;if(as){linkEl.as=as}
|
|
|
|
|
document.head.append(linkEl)}
|
2023-10-05 18:18:43 +00:00
|
|
|
static warmConnections(){if(LiteYTEmbed.preconnected)return;LiteYTEmbed.addPrefetch('preconnect','https://www.youtube.com');LiteYTEmbed.addPrefetch('preconnect','https://www.google.com');LiteYTEmbed.addPrefetch('preconnect','https://googleads.g.doubleclick.net');LiteYTEmbed.addPrefetch('preconnect','https://static.doubleclick.net');LiteYTEmbed.preconnected=!0}
|
2023-10-17 12:10:07 +00:00
|
|
|
addIframe(){if(this.classList.contains('lyt-activated'))return;this.classList.add('lyt-activated');const params=new URLSearchParams(this.getAttribute('params')||[]);params.append('autoplay','1');const iframeEl=document.createElement('iframe');iframeEl.width=560;iframeEl.height=315;iframeEl.sandbox='allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox';iframeEl.title=this.playLabel;iframeEl.allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';iframeEl.allowFullscreen=!0;iframeEl.src=`https://cdpn.io/pen/debug/NWeVNRj?v=${encodeURIComponent(this.videoId)}&${params.toString()}`;this.append(iframeEl);iframeEl.focus()}}
|
2022-10-29 18:23:48 +00:00
|
|
|
customElements.define('lite-youtube',LiteYTEmbed)
|
