From 27fc34e186ffdb7083390ad38358cd8002c621ab Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 21 Jun 2026 11:40:54 +0200
Subject: [PATCH] fix(perf): refactor HeroVideo to provide immediate Next.js
 optimized LCP image behind video

---
 components/blocks/HeroVideo.tsx | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/components/blocks/HeroVideo.tsx b/components/blocks/HeroVideo.tsx
index 291ef366d..d8c2281dd 100644
--- a/components/blocks/HeroVideo.tsx
+++ b/components/blocks/HeroVideo.tsx
@@ -46,26 +46,28 @@ export function HeroVideo(props: HeroVideoProps) {
       {/* Background color while video loads */}
       <div className="absolute inset-0 z-0 bg-neutral-dark" />
       
-      {videoUrl ? (
+      {/* ALWAYS render the Next.js optimized Image as the LCP element */}
+      <Image
+        key={`img-${pathname}-${posterSrc}`}
+        src={posterSrc}
+        alt={posterAlt}
+        fill
+        className="object-cover z-[1] pointer-events-none filter contrast-125 saturate-110 brightness-90"
+        sizes="100vw"
+        priority
+      />
+
+      {/* Render video on top if available, but don't force aggressive preload */}
+      {videoUrl && (
         <video
           key={`${pathname}-${videoUrl}`}
-          className="absolute inset-0 w-full h-full object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
+          className="absolute inset-0 w-full h-full object-cover z-[2] pointer-events-none filter contrast-125 saturate-110 brightness-90"
           src={videoUrl}
           autoPlay
           muted
           loop
           playsInline
-          preload="auto"
-        />
-      ) : (
-        <Image
-          key={`img-${pathname}-${posterSrc}`}
-          src={posterSrc}
-          alt={posterAlt}
-          fill
-          className="object-cover z-1 pointer-events-none filter contrast-125 saturate-110 brightness-90"
-          sizes="100vw"
-          priority
+          preload="metadata"
         />
       )}