34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
|
"use client";
|
||
|
|
import CustomButton from "./CustomButton";
|
||
|
|
import { useRef, useEffect, useState } from 'react';
|
||
|
|
import Image from 'next/image';
|
||
|
|
import { CoursesProps, SettingsProps } from "@/types";
|
||
|
|
|
||
|
|
|
||
|
|
function convertToEmbedLink(watchLink: string): string {
|
||
|
|
const videoIdMatch = watchLink.match(/(?:v=|\/)([a-zA-Z0-9_-]{11})/);
|
||
|
|
if (videoIdMatch && videoIdMatch[1]) {
|
||
|
|
const videoId = videoIdMatch[1];
|
||
|
|
return `https://www.youtube.com/embed/${videoId}`;
|
||
|
|
}
|
||
|
|
return watchLink; // Return original link if conversion fails
|
||
|
|
}
|
||
|
|
|
||
|
|
const Hero2 = ({ settings }: { settings: SettingsProps }) => {
|
||
|
|
return (
|
||
|
|
<div className="relative flex flex-col items-center bg-[#F6E8E9] h-auto z-[10] w-full pt-30 transition-all duration-200">
|
||
|
|
<div className="flex w-full h-auto justify-center items-center relative">
|
||
|
|
<div className="bg-[url('/images/014.png')] absolute bottom-0 inset-0 h-auto w-full bg-contain bg-bottom bg-no-repeat"></div>
|
||
|
|
<iframe
|
||
|
|
className="rounded-2xl w-[100vh] aspect-video justify-center relative z-10 lg:m-[15vh] max-sm:m-[5vh] md:m-[10vh]"
|
||
|
|
src={convertToEmbedLink(settings.youtube_link)}
|
||
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||
|
|
allowFullScreen
|
||
|
|
></iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Hero2
|