Initial Commit

components/LoadVideoPlayer.js

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import Image from "next/image";
+
+const LoadVideoPlayer = ({ thumbnailUrl, videoType, videoUrl, altText }) => {
+    const [showVideo, setShowVideo] = useState(false);
+
+    const handleClick = () => {
+        setShowVideo(true);
+    };
+
+    return (
+        <div className="w-full bg-gray-900 rounded-lg">
+            {!showVideo && (
+                <div onClick={handleClick} className="cursor-pointer">
+                    <Image
+                        src={thumbnailUrl}
+                        alt={altText}
+                        width={1920}
+                        height={1080}
+                        layout="responsive"
+                        className="object-contain rounded-lg"
+                    />
+                </div>
+            )}
+            {showVideo && videoType === "vimeo" && (
+                <iframe
+                    className="w-full aspect-[16/9] rounded-lg shadow-xl"
+                    src={videoUrl}
+                    frameBorder="0"
+                    allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
+                    title={altText}
+                ></iframe>
+            )}
+            {showVideo && videoType === "youtube" && (
+                <iframe
+                    className="w-full aspect-[16/9] rounded-lg"
+                    src={videoUrl}
+                    title="YouTube video player"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    allowFullScreen
+                ></iframe>
+            )}
+        </div>
+    );
+};
+
+export default LoadVideoPlayer;

package.json

@@ -9,14 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@headlessui/react": "^2.0.4",
+    "@heroicons/react": "^2.1.3",
+    "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
   }
 }