From 7eac2bc3a1dfcb0de43b8448f3f25c31878295f6 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Wed, 11 Mar 2026 10:39:35 -0500
Subject: [PATCH] fix(site): work around video layout quirks in hero (#884)

---
 site/src/components/home/Header.astro | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/site/src/components/home/Header.astro b/site/src/components/home/Header.astro
index 6833ef7e..65f52067 100644
--- a/site/src/components/home/Header.astro
+++ b/site/src/components/home/Header.astro
@@ -25,7 +25,7 @@ const poster = `${VJS10_DEMO_VIDEO.poster}?time=0`;
     style="--grid-area: title; --md-grid-area: video;"
   >
     The Open Source Player <br class="lg:hidden" /><span
-      class="text-stroke-faded-black md:text-stroke-manila-light"
+      class="text-stroke-faded-black md:text-stroke-manila-light dark:text-stroke-manila-light"
       >for the Web</span
     >
   </h1>
@@ -38,12 +38,12 @@ const poster = `${VJS10_DEMO_VIDEO.poster}?time=0`;
     rebuilt in v10 for modern development and performance.
   </p>
 
-  <HeroVideo
-    client:load
-    className="mb-3 aspect-2/1 md:mb-4 md:aspect-1180/570"
-    style={{ gridArea: "video" }}
-    poster={poster}
-  />
+  <div
+    class="relative mb-3 aspect-2/1 md:mb-4 md:aspect-1180/570"
+    style="grid-area:video"
+  >
+    <HeroVideo client:load className="absolute inset-0" poster={poster} />
+  </div>
   <p
     class="mb-11 flex items-center justify-center gap-1.5 text-p3 md:mb-20 md:justify-end md:gap-2 md:pr-6 md:font-display md:text-(length:--md-text) md:uppercase"
     style="grid-area:mux;--md-text:0.6875rem;"