updated video or image option both in video section

components/Collection/Video.js

@@ -11,6 +11,9 @@ const Video = ({ productData }) => {
   const isVideo = media?.mime?.startsWith("video/");
   const isVideo = media?.mime?.startsWith("video/");
   const isImage = media?.mime?.startsWith("image/");
   const isImage = media?.mime?.startsWith("image/");
 
 
+  // ✅ Strapi default image path
+  const defaultImage = "/image/default.svg";
+
   useEffect(() => {
   useEffect(() => {
     const observer = new IntersectionObserver(
     const observer = new IntersectionObserver(
       ([entry]) => {
       ([entry]) => {
@@ -29,8 +32,6 @@ const Video = ({ productData }) => {
     };
     };
   }, []);
   }, []);
 
 
-  if (!media?.url) return null;
-
   return (
   return (
     <section className="video_sec">
     <section className="video_sec">
       <div className="custom_containers">
       <div className="custom_containers">
@@ -46,7 +47,6 @@ const Video = ({ productData }) => {
             className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
             className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
           >
           >
             <source src={cleanImage(media?.url)} type={media?.mime || "video/mp4"} />
             <source src={cleanImage(media?.url)} type={media?.mime || "video/mp4"} />
-            Your browser does not support the video tag.
           </video>
           </video>
         )}
         )}
 
 
@@ -58,11 +58,26 @@ const Video = ({ productData }) => {
           >
           >
             <Image
             <Image
               src={cleanImage(media?.url)}
               src={cleanImage(media?.url)}
-              alt={media?.alternativeText || media?.name || "Media"}
+              alt={media?.alternativeText || "Media"}
               width={media?.width || 868}
               width={media?.width || 868}
               height={media?.height || 560}
               height={media?.height || 560}
               className="w-100"
               className="w-100"
-              style={{ objectFit: "cover" }}
+            />
+          </div>
+        )}
+
+        {/* DEFAULT IMAGE */}
+        {!media && (
+          <div
+            ref={mediaRef}
+            className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
+          >
+            <Image
+              src={cleanImage()}
+              alt="Default Image"
+              width={868}
+              height={560}
+              className="w-100"
             />
             />
           </div>
           </div>
         )}
         )}