39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
"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>
|
|
);
|
|
}
|