Personal Website, vers. 1 (pushed far to late)

client/js/video.js

@@ -0,0 +1,19 @@
+// YouTube is only contacted after a click, until then it's just a link with a poster
+export function initVideos() {
+  for (const box of document.querySelectorAll('[data-youtube]')) {
+    const play = box.querySelector('[data-video-play]');
+    play?.addEventListener('click', (event) => {
+      if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+      event.preventDefault();
+      const iframe = document.createElement('iframe');
+      iframe.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(box.dataset.youtube)}?autoplay=1&rel=0`;
+      iframe.title = box.dataset.title || 'YouTube';
+      iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
+      iframe.allowFullscreen = true;
+      // YouTube refuses to play embeds without a referrer, helmet sets no-referrer for the page
+      iframe.referrerPolicy = 'strict-origin-when-cross-origin';
+      box.replaceChildren(iframe);
+      iframe.focus();
+    });
+  }
+}