x

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -169,6 +169,7 @@ function HeroVideoSection({ payload, lang }: { payload: Record<string, unknown>,
   const posterImageUrl = typeof payload.posterImageUrl === 'string' ? payload.posterImageUrl : undefined
   const overlayOpacity = typeof payload.overlayOpacity === 'number' ? payload.overlayOpacity : 40
   const height = typeof payload.height === 'string' ? payload.height : 'large'
+  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined
 
   const getHeightClass = (h: string) => {
     switch (h) {
@@ -192,13 +193,30 @@ function HeroVideoSection({ payload, lang }: { payload: Record<string, unknown>,
           playsInline
           poster={posterImageUrl}
           className="absolute inset-0 w-full h-full object-cover z-0"
+          style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
         >
           <source src={videoUrl} type="video/mp4" />
           <source src={videoUrl} type="video/webm" />
-          {posterImageUrl && <Image src={posterImageUrl} alt="Hero fallback" fill unoptimized className="object-cover" />}
+          {posterImageUrl && (
+            <Image
+              src={posterImageUrl}
+              alt="Hero fallback"
+              fill
+              unoptimized
+              className="object-cover"
+              style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
+            />
+          )}
         </video>
       ) : posterImageUrl ? (
-        <Image src={posterImageUrl} alt="Hero Poster" fill unoptimized className="object-cover z-0" />
+        <Image
+          src={posterImageUrl}
+          alt="Hero Poster"
+          fill
+          unoptimized
+          className="object-cover z-0"
+          style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
+        />
       ) : null}
 
       <div className="absolute inset-0 z-10 bg-black transition-opacity" style={{ opacity: overlayOpacity / 100 }}></div>