designslife/dlStack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix YouTube card: pause/seek no longer restart the video

Browse Source 
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
This commit is contained in:
Joel Brock
2026-05-15 16:45:13 -07:00
parent 543d3bd8e1
commit 16314054ec
2 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/styles.css
View File

@@ -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%;

10
assets/js/app.js
View File

@@ -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) => {