52 lines
1.5 KiB
Text
52 lines
1.5 KiB
Text
|
---
|
||
|
|
const onload = `
|
||
|
|
const link = (rel, href) => {
|
||
|
|
document.querySelector(\`[rel='\${rel}'][href='\${href}']\`) || document.head.append(
|
||
|
|
Object.assign(
|
||
|
|
document.createElement('link'),
|
||
|
|
{
|
||
|
|
rel,
|
||
|
|
href: href
|
||
|
|
}
|
||
|
|
)
|
||
|
|
)
|
||
|
|
};
|
||
|
|
const preconnect = () => {
|
||
|
|
link('preconnect', 'https://googleads.g.doubleclick.net');
|
||
|
|
link('preconnect', 'https://static.doubleclick.net');
|
||
|
|
link('preconnect', 'https://www.google.com');
|
||
|
|
link('preconnect', 'https://www.youtube-nocookie.com');
|
||
|
|
};
|
||
|
|
const host = this.parentNode;
|
||
|
|
const v = host.getAttribute('v');
|
||
|
|
const iframe = Object.assign(
|
||
|
|
document.createElement('iframe'),
|
||
|
|
{
|
||
|
|
src: \`https://www.youtube-nocookie.com/embed/\${v}?autoplay=1\`,
|
||
|
|
allow: 'accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture',
|
||
|
|
allowFullscreen: true,
|
||
|
|
}
|
||
|
|
);
|
||
|
|
const button = Object.assign(
|
||
|
|
document.createElement('button'),
|
||
|
|
{
|
||
|
|
style: \`background-image:url('https://i.ytimg.com/vi/\${v}/hqdefault.jpg')\`,
|
||
|
|
onpointerenter: preconnect,
|
||
|
|
onfocus: preconnect,
|
||
|
|
onclick(event) {
|
||
|
|
event.currentTarget.replaceWith(iframe)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
button.setAttribute('aria-label', host.getAttribute('alt'));
|
||
|
|
|
||
|
|
host.replaceChildren(button);
|
||
|
|
`.replace(/[\n\r\t]+/g, '')
|
||
|
|
---
|
||
|
|
<lite-youtube {...Astro.props}>
|
||
|
|
<a href={`https://www.youtube.com/watch?v=${Astro.props.v}`}>
|
||
|
|
<img src={`https://i.ytimg.com/vi/${Astro.props.v}/hqdefault.jpg`} loading="lazy" alt={Astro.props.alt} />
|
||
|
|
</a><script type="module" src="data:text/javascript," onload={onload}></script>
|
||
|
|
</lite-youtube>
|