class LiteYTEmbed extends HTMLElement {
connectedCallback(){
this.videoId=this.getAttribute('videoid');
if(!this.videoId) return;
if(!this.style.backgroundImage){
const poster=this.getAttribute('posterurl') ||
`https://i.ytimg.com/vi_webp/${this.videoId}/hqdefault.webp`;
this.style.backgroundImage=`url('${poster}')`;
}
let playBtn=this.querySelector('.lty-playbtn');
if(!playBtn){
playBtn=document.createElement('button');
playBtn.type='button';
playBtn.className='lty-playbtn';
playBtn.setAttribute('aria-label', this.getAttribute('playlabel')||'Play video');
this.append(playBtn);
}
this.addEventListener('pointerover', LiteYTEmbed.warmConnections, { once: true });
this.addEventListener('focusin', LiteYTEmbed.warmConnections, { once: true });
this.addEventListener('click', this.activate);
}
static warmConnections(){
if(LiteYTEmbed.preconnected) return;
LiteYTEmbed.preconnected=true;
['https://www.youtube-nocookie.com', 'https://www.google.com',
'https://googleads.g.doubleclick.net', 'https://static.doubleclick.net']
.forEach(href=> {
const link=document.createElement('link');
link.rel='preconnect';
link.href=href;
document.head.append(link);
});
}
activate(){
if(this.classList.contains('lyt-activated')) return;
const params=new URLSearchParams(this.getAttribute('params')||'').toString();
const autoplay=params.includes('autoplay=1') ? params:(params ? params + '&autoplay=1':'autoplay=1');
const iframe=document.createElement('iframe');
iframe.width=560;
iframe.height=315;
iframe.title=this.getAttribute('playlabel')||'YouTube video';
iframe.allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
iframe.allowFullscreen=true;
iframe.src=`https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${autoplay}`;
iframe.style.cssText='position:absolute;inset:0;width:100%;height:100%;border:0;';
this.append(iframe);
this.classList.add('lyt-activated');
iframe.focus();
}}
if(!customElements.get('lite-youtube')){
customElements.define('lite-youtube', LiteYTEmbed);
};