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 },
     },
   },
 ]);