updated video or image option both in video section

components/Collection/Video.js

 import React, { useRef, useEffect, useState } from "react";
 import React, { useRef, useEffect, useState } from "react";
-import { Container } from "react-bootstrap";
+import Image from "next/image";
 import { cleanImage } from "../services/imageHandling";
 import { cleanImage } from "../services/imageHandling";
 
 
-const Video = ({productData}) => {
-
-  const videoRef = useRef(null);
+const Video = ({ productData }) => {
+  const mediaRef = useRef(null);
   const [isVisible, setIsVisible] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
 
 
- useEffect(() => {
-  const observer = new IntersectionObserver(
-    ([entry]) => {
-      if (entry.isIntersecting) {
-        setIsVisible(true);
-
-        // 👇 Stop observing after first visibility
-        observer.unobserve(entry.target);
-      }
-    },
-    { threshold: 0.5 }
-  );
+  const media = productData?.video;
+
+  const isVideo = media?.mime?.startsWith("video/");
+  const isImage = media?.mime?.startsWith("image/");
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(entry.target);
+        }
+      },
+      { threshold: 0.5 }
+    );
 
 
-  if (videoRef.current) observer.observe(videoRef.current);
+    if (mediaRef.current) observer.observe(mediaRef.current);
 
 
-  return () => {
-    if (videoRef.current) observer.unobserve(videoRef.current);
-  };
-}, []);
+    return () => {
+      if (mediaRef.current) observer.unobserve(mediaRef.current);
+    };
+  }, []);
+
+  if (!media?.url) return null;
 
 
   return (
   return (
     <section className="video_sec">
     <section className="video_sec">
       <div className="custom_containers">
       <div className="custom_containers">
-        <video
-          ref={videoRef}
-          autoPlay
-          muted
-          loop
-          playsInline
-          className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
-        >
-          <source src={cleanImage(productData?.video?.url)} type="video/mp4" />
-          Your browser does not support the video tag.
-        </video>
+
+        {/* VIDEO */}
+        {isVideo && (
+          <video
+            ref={mediaRef}
+            autoPlay
+            muted
+            loop
+            playsInline
+            className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
+          >
+            <source src={cleanImage(media?.url)} type={media?.mime || "video/mp4"} />
+            Your browser does not support the video tag.
+          </video>
+        )}
+
+        {/* IMAGE */}
+        {isImage && (
+          <div
+            ref={mediaRef}
+            className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
+          >
+            <Image
+              src={cleanImage(media?.url)}
+              alt={media?.alternativeText || media?.name || "Media"}
+              width={media?.width || 868}
+              height={media?.height || 560}
+              className="w-100"
+              style={{ objectFit: "cover" }}
+            />
+          </div>
+        )}
+
       </div>
       </div>
     </section>
     </section>
   );
   );
 };
 };
 
 
-export default Video;
+export default Video;
\ No newline at end of file

styles/globals.css

@@ -345,6 +345,9 @@ button.cust-swiper-button-next {
 .video-visible {
 .video-visible {
   transform: scale(1.1);
   transform: scale(1.1);
 }
 }
+.video-visible img{
+  height: 100%;
+}
   .video_sec{
   .video_sec{
     overflow: hidden;
     overflow: hidden;
   }
   }