fix(website): refresh the intro video and stop its white flash

website/app/page.ts

@@ -470,19 +470,43 @@ export default function LandingPage() {
       </div>
     </section>
 
-    <section class="pb-16">
+    <section class="intro-video pb-16">
       <div class="max-w-3xl mx-auto px-6">
-        <div class="aspect-video overflow-hidden border border-border-strong shadow-[var(--shadow)]">
+        <!-- The frame is hidden until it fires load, over a black box.
+             A cross-origin iframe paints its OWN canvas, and YouTube's embed
+             sets its black background on body with no color-scheme declared,
+             so the black only lands once that stylesheet applies. Until then
+             some engines paint an opaque white canvas, which no background on
+             the iframe ELEMENT can cover, since the element background sits
+             behind that canvas. Hiding the frame sidesteps the whole question:
+             what it paints early is simply not on screen, and the box under it
+             is already the black the player settles on, so the reveal is
+             invisible. onload is a plain HTML attribute rather than a template
+             hole, because an @event drops at SSR and this page never hydrates. -->
+        <div class="aspect-video overflow-hidden border border-border-strong shadow-[var(--shadow)] bg-black">
           <iframe
-            class="w-full h-full"
-            src="https://www.youtube-nocookie.com/embed/iz23lVMvlVY?rel=0"
+            class="intro-video-frame w-full h-full invisible"
+            onload="this.classList.remove('invisible')"
+            src="https://www.youtube-nocookie.com/embed/XghCghezod4?rel=0"
             title="WebJs introduction video"
             loading="lazy"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
             referrerpolicy="strict-origin-when-cross-origin"
             allowfullscreen
           ></iframe>
         </div>
+        <!-- With JS off the whole section goes away. Revealing the frame
+             instead would show YouTube's own noscript error ("An error
+             occurred. Unable to execute JavaScript."), because their player
+             needs JS INSIDE the frame and nothing this page does can supply
+             it. An empty space reads better than a broken player.
+
+             The rule still applies from in here: a style element takes effect
+             wherever it sits, including inside the subtree it hides. And it
+             is safe in a PAGE, which never hydrates, so the client never
+             rebuilds this noscript body as live nodes. The same construct
+             inside a COMPONENT would apply on every JS-enabled visit. -->
+        <noscript><style>.intro-video { display: none }</style></noscript>
       </div>
     </section>
 

website/test/ssr/intro-video-ssr.test.ts

@@ -0,0 +1,42 @@
+/**
+ * The landing page's intro video is hidden until its frame fires load.
+ *
+ * A cross-origin iframe paints its own canvas before the embedded stylesheet
+ * applies, and on some engines that canvas is opaque white, which no
+ * background on the iframe element can cover. Hiding the frame until load
+ * removes the question: what it paints early is off screen, and the box under
+ * it is already black.
+ *
+ * Each assertion here is a piece that silently breaks the whole thing if it
+ * goes missing, which is why they are pinned rather than left to review.
+ */
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { renderToString } from '@webjsdev/core/server';
+import LandingPage from '#app/page.ts';
+
+const render = () => renderToString(LandingPage());
+
+test('the intro frame ships hidden, over a black box', async () => {
+  const out = await render();
+  assert.match(out, /class="intro-video-frame [^"]*\binvisible\b/, 'the frame must start hidden');
+  assert.match(out, /aspect-video[^"]*\bbg-black\b/, 'the box under it must be black');
+});
+
+test('the frame reveals itself with a plain onload attribute', async () => {
+  const out = await render();
+  // A plain HTML attribute, not an @event hole: this page never hydrates, so
+  // a template event binding would be dropped at SSR and the frame would stay
+  // hidden forever.
+  assert.match(out, /onload="this\.classList\.remove\('invisible'\)"/);
+});
+
+test('a JS-off reader gets no embed at all', async () => {
+  const out = await render();
+  // Without JS the load handler never runs AND YouTube's player cannot run
+  // inside the frame either, so revealing it would show their own noscript
+  // error rather than a video. Hide the whole section instead. The rule must
+  // live in noscript, which a browser with scripting on parses as inert text.
+  assert.match(out, /<noscript><style>\.intro-video \{ display: none \}<\/style><\/noscript>/);
+  assert.match(out, /<section class="intro-video /, 'the rule needs its hook on the section');
+});