fix(site): work around video layout quirks in hero (#884)

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;"