From 384a1dd262ac7206d7e85acba375232a8b8045e8 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 8 Jul 2026 02:14:49 -0400
Subject: [PATCH] fix(embeds): video player iframe collapses to ~200px (use
 padding-top, not aspect-ratio)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The inline video embed container (EmbedMediaLandscape/Portrait) used CSS
aspect-ratio for its 16:9 / 9:16 box. An absolutely-positioned *replaced* element
— the player <iframe> (position:absolute; inset:0; width/height:100%) — collapses
to its ~200px intrinsic size inside an aspect-ratio box rather than filling it, so
after pressing play the YouTube/Vimeo player rendered at ~202x114 in the top-left of
the (correct) 600x340 facade box, leaving a wide gray gap. The click-to-play
facade uses an <img>, which doesn't hit this, so the pre-play preview looked fine.

Switch the video containers to the padding-top percentage hack (56.25% / 177.78%),
which derives a definite height from the definite width so the absolutely-positioned
iframe fills it reliably. Fullscreen override sets padding-top:0 + height:100vh.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/components/url-preview/UrlPreview.css.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/app/components/url-preview/UrlPreview.css.tsx b/src/app/components/url-preview/UrlPreview.css.tsx
index 3f89a021c..99e6afcc5 100644
--- a/src/app/components/url-preview/UrlPreview.css.tsx
+++ b/src/app/components/url-preview/UrlPreview.css.tsx
@@ -213,11 +213,16 @@ export const EmbedMediaLandscape = style([
   {
     position: 'relative',
     width: '100%',
-    aspectRatio: '16 / 9',
+    // 16:9 via the padding-top hack (56.25%), NOT `aspect-ratio`. An absolutely-
+    // positioned *replaced* element (the player <iframe>) collapses to its ~200px
+    // intrinsic size inside an `aspect-ratio` box; padding derives a definite height
+    // from the definite width so the iframe (inset:0) reliably fills it.
+    height: 0,
+    paddingTop: '56.25%',
     overflow: 'hidden',
     backgroundColor: color.Surface.Container,
     selectors: {
-      '&:fullscreen': { width: '100vw', height: '100vh', aspectRatio: 'auto' },
+      '&:fullscreen': { width: '100vw', height: '100vh', paddingTop: 0 },
     },
   },
 ]);
@@ -228,12 +233,14 @@ export const EmbedMediaPortrait = style([
     position: 'relative',
     width: toRem(300),
     maxWidth: '100%',
-    aspectRatio: '9 / 16',
+    // 9:16 via the padding-top hack (177.78%) — see EmbedMediaLandscape.
+    height: 0,
+    paddingTop: '177.78%',
     margin: '0 auto',
     overflow: 'hidden',
     backgroundColor: color.Surface.Container,
     selectors: {
-      '&:fullscreen': { width: '100vw', height: '100vh', aspectRatio: 'auto', margin: 0 },
+      '&:fullscreen': { width: '100vw', height: '100vh', paddingTop: 0, margin: 0 },
     },
   },
 ]);