ss

2026-06-09 13:06:58 +03:00
parent 13b77ee54f
commit f6b4acb760
19 changed files with 2633 additions and 75 deletions
@@ -0,0 +1,38 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+export default function HeroVideo() {
+  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
+
+  return (
+    <div className="absolute inset-0 z-0 bg-dark overflow-hidden pointer-events-none">
+      <Image
+        src="https://img.youtube.com/vi/V9AhK54xsxY/maxresdefault.jpg"
+        alt="Kite Beach Akyaka Video Thumbnail"
+        fill
+        className={`object-cover transition-opacity duration-1000 ease-in-out ${
+          isVideoLoaded ? "opacity-0" : "opacity-80"
+        }`}
+        priority
+      />
+      <iframe
+        src="https://www.youtube.com/embed/V9AhK54xsxY?autoplay=1&mute=1&loop=1&playlist=V9AhK54xsxY&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&start=140&disablekb=1"
+        title="Kite Beach Akyaka Video"
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+        onLoad={() => {
+          // Add a slight delay to ensure the video has actually started rendering
+          setTimeout(() => setIsVideoLoaded(true), 1500);
+        }}
+        className={`absolute top-1/2 left-1/2 w-[100vw] h-[56.25vw] min-h-[100vh] min-w-[177.77vh] -translate-x-1/2 -translate-y-1/2 object-cover transition-opacity duration-1000 ${
+          isVideoLoaded ? "opacity-80" : "opacity-0"
+        }`}
+      ></iframe>
+      <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-dark/90" />
+      <div className="absolute inset-0 bg-gradient-to-r from-dark/30 to-transparent" />
+    </div>
+  );
+}