From 16314054eccc4f5862ecbb0aeca1d4b1b0e09c05 Mon Sep 17 00:00:00 2001
From: Joel Brock <joelbrock@gmail.com>
Date: Fri, 15 May 2026 16:45:13 -0700
Subject: [PATCH] Fix YouTube card: pause/seek no longer restart the video
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The .yt::after gradient overlay was sitting on top of the inserted
iframe and stealing every click — clicks on the YouTube player controls
bubbled to the .yt facade, which still matched [data-yt] and re-ran
open(), replacing the iframe and restarting playback from 0.

- Add pointer-events:none on .yt::after so it never blocks player clicks
- On play, swap .yt to a .yt--playing state that hides the overlay,
  play button, and title overlay
- Remove the data-yt/role/tabindex attrs after init so any leftover
  clicks on the facade no longer match the open() delegate
- Add controls=1 explicitly and broaden the allow list (clipboard-write,
  web-share) for the embedded player
---
 assets/css/styles.css |  6 +++++-
 assets/js/app.js      | 10 ++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index b6980e2..4eb9a15 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -455,7 +455,11 @@ body::before {
 /* youtube */
 .card--youtube { padding: 0; overflow: hidden; }
 .yt { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; cursor: pointer; display: block; }
-.yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.65) 100%); }
+.yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.65) 100%); pointer-events: none; }
+.yt.yt--playing { cursor: default; background: #000; }
+.yt.yt--playing::after,
+.yt.yt--playing .yt__play,
+.yt.yt--playing .yt__title { display: none; }
 .yt__play {
   position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
   width: 72px; height: 72px; border-radius: 50%;
diff --git a/assets/js/app.js b/assets/js/app.js
index fdff5b4..2552bde 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -188,12 +188,18 @@
 
   function attachYouTube(root) {
     const open = (fac) => {
+      const id = fac.dataset.yt;
+      if (!id) return;
       const iframe = document.createElement("iframe");
-      iframe.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(fac.dataset.yt)}?autoplay=1&rel=0`;
-      iframe.allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
+      iframe.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(id)}?autoplay=1&rel=0&controls=1`;
+      iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
       iframe.allowFullscreen = true;
       iframe.title = fac.getAttribute("aria-label") || "YouTube video";
       fac.replaceChildren(iframe);
+      fac.classList.add("yt--playing");
+      fac.removeAttribute("data-yt");
+      fac.removeAttribute("role");
+      fac.removeAttribute("tabindex");
       fac.style.cursor = "default";
     };
     root.addEventListener("click", (e) => {