From 162b4b45bc719b0f0049cef337677c50608cefbb Mon Sep 17 00:00:00 2001
From: Danny Neira <16809145+dannyneira@users.noreply.github.com>
Date: Wed, 7 Oct 2026 13:14:40 -0600
Subject: [PATCH] fix: keep article image lightbox off VideoEmbed posters

YouTube click-to-play posters live in article content, so the image
lightbox was treating them as expandable images. Clicking play opened
the lightbox over the autoplaying iframe. Skip .video-embed images and
mark posters with data-no-lightbox.

Co-Authored-By: Warp <agent@warp.dev>
---
 src/components/ArticleImageLightbox.astro | 4 +++-
 src/components/VideoEmbed.astro           | 1 +
 src/styles/custom.css                     | 5 +++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ArticleImageLightbox.astro b/src/components/ArticleImageLightbox.astro
index 8f96660e8..e751b1a58 100644
--- a/src/components/ArticleImageLightbox.astro
+++ b/src/components/ArticleImageLightbox.astro
@@ -49,9 +49,11 @@
 
 		let activeTrigger: HTMLElement | null = null;
 
+		// VideoEmbed posters live in article content and must stay click-to-play.
+		// Enhancing them opens the lightbox over the iframe and hides the video.
 		const isEligibleArticleImage = (image: HTMLImageElement) =>
 			image.matches('main .sl-markdown-content img') &&
-			!image.closest('.not-content, #sl-kapa-panel, [data-no-lightbox]');
+			!image.closest('.not-content, #sl-kapa-panel, .video-embed, [data-no-lightbox]');
 		const isEligibleKapaImage = (image: HTMLImageElement, trigger: HTMLElement) =>
 			trigger.matches('.sl-kapa-answer-image-button') &&
 			image.matches('.sl-kapa-answer-image') &&
diff --git a/src/components/VideoEmbed.astro b/src/components/VideoEmbed.astro
index 1e37b3d62..8af874bed 100644
--- a/src/components/VideoEmbed.astro
+++ b/src/components/VideoEmbed.astro
@@ -92,6 +92,7 @@ const posterAlt = title || (kind === 'youtube' ? 'YouTube video' : '');
         decoding="async"
         width="640"
         height="480"
+        data-no-lightbox
       />
       <span class="video-embed__play" aria-hidden="true">
         <svg viewBox="0 0 68 48" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/styles/custom.css b/src/styles/custom.css
index 6b98b5af9..cdac1e731 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -335,8 +335,9 @@ body {
 }
 /* Article images are enhanced by ArticleImageLightbox.astro with keyboard
    dialog controls while this class adds a layout-neutral zoom affordance.
-   The script scopes enhancement to main docs content and honors
-   `data-no-lightbox` on the image or any ancestor. */
+   The script scopes enhancement to main docs content and skips VideoEmbed
+   posters plus anything marked with `data-no-lightbox` on the image or an
+   ancestor. */
 .sl-markdown-content img[data-docs-image-lightbox-image] {
   cursor: zoom-in;
   transition: box-shadow 0.15s ease;