x

apps/spa/src/components/DynamicHeroVideo.tsx

@@ -22,6 +22,8 @@ export default function DynamicHeroVideo({ payload }: DynamicHeroVideoProps) {
   const overlayOpacity = typeof payload.overlayOpacity === 'number' ? payload.overlayOpacity : 40;
   const height = 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) {
       case 'full':
@@ -66,13 +68,26 @@ export default function DynamicHeroVideo({ payload }: DynamicHeroVideoProps) {
           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 && <img src={posterImageUrl} alt="Hero fallback" className="w-full h-full object-cover" />}
+          {posterImageUrl && (
+            <img
+              src={posterImageUrl}
+              alt="Hero fallback"
+              className="w-full h-full object-cover"
+              style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
+            />
+          )}
         </video>
       ) : posterImageUrl ? (
-        <img src={posterImageUrl} alt="Hero Poster" className="absolute inset-0 w-full h-full object-cover z-0" />
+        <img
+          src={posterImageUrl}
+          alt="Hero Poster"
+          className="absolute inset-0 w-full h-full object-cover z-0"
+          style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
+        />
       ) : null}
 
       {/* Customizable Overlay Opacity */}