feat: Video unter dem Headerbild aus dem Medienverzeichnis (intro.mp4)

Startet nur nach Klick; mit Vorschaubild (intro.jpg) lädt vorab nichts vom Video. Vorschaubilder von Intro und Reels laufen über die Bildoptimierung statt im Original, Videos bevorzugen eine Web-Fassung <name>.web.mp4.

Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>

src/components/VideoSlot.tsx

@@ -1,17 +1,23 @@
 import type { Media } from "@/content/site";
+import { optimizedImageUrl } from "@/lib/image-url";
 import { MediaFrame } from "./MediaFrame";
 
+/** Reels sind hoch und hoechstens ein Drittel breit. */
+const POSTER_WIDTH = 1080;
+
 type Slot = { name: string | null; caption: string | null; poster: Media | null; src: string | null };
 
 /**
  * Ein Video aus dem eigenen Medienverzeichnis, im eigenen Seitenverhaeltnis
- * (quer oder hoch). Es startet nie von selbst; geladen werden vorab nur die
- * Metadaten und das erste Bild als Vorschau (#t=0.1), falls kein
- * Vorschaubild hinterlegt ist. Kein externer Anbieter.
+ * (quer oder hoch). Es startet nie von selbst. Mit Vorschaubild laedt vorab
+ * nichts vom Video, ohne nur Metadaten und erstes Bild (#t=0.1). Kein
+ * externer Anbieter.
  */
 export function VideoSlot({ slot, index, showDrafts }: { slot: Slot; index: number; showDrafts: boolean }) {
   const label = slot.name ? `Video von ${slot.name}` : `Video ${index + 1}`;
-  const poster = slot.poster?.kind === "image" ? slot.poster.src : undefined;
+  // Vorschaubild ueber die Bildoptimierung statt im Original (ein Reel-PNG
+  // hatte 1,3 MB); mit Vorschaubild laedt vom Video vorab nichts.
+  const poster = slot.poster?.kind === "image" ? optimizedImageUrl(slot.poster.src, POSTER_WIDTH) : undefined;
 
   return (
     <figure>
@@ -21,7 +27,7 @@ export function VideoSlot({ slot, index, showDrafts }: { slot: Slot; index: numb
           poster={poster}
           controls
           playsInline
-          preload="metadata"
+          preload={poster ? "none" : "metadata"}
           aria-label={label}
           className="mx-auto block max-h-[80vh] w-full rounded-2xl bg-ink object-contain"
         >