YouTube Embed

1import { cn } from '@/lib/utils'
2import { useState } from 'react'
3 
4interface YouTubeEmbedProps {
5  videoId: string
6  title?: string
7  className?: string
8}
9 
10export function YouTubeEmbed({ videoId, title, className }: YouTubeEmbedProps) {
11  const [isLoading, setIsLoading] = useState(true)
12 
13  return (
14    <div className={cn(
15      'flex flex-col space-y-4 w-full h-full relative rounded-xl overflow-hidden border border-border',
16      className
17    )}>
18      {isLoading && (
19        <div className="absolute inset-0 flex items-center justify-center bg-muted">
20          <div className="w-8 h-8 border-2 border-pink-400 border-t-transparent rounded-full animate-spin" />
21        </div>
22      )}
23      <iframe
24        src={`https://www.youtube.com/embed/${videoId}`}
25        title={title || 'YouTube video player'}
26        frameBorder="0"
27        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
28        referrerPolicy="strict-origin-when-cross-origin"
29        allowFullScreen
30        loading="lazy"
31        onLoad={() => setIsLoading(false)}
32        className={cn(
33          'w-full aspect-video h-full bg-transparent transition-opacity duration-300',
34          isLoading ? 'opacity-0' : 'opacity-100'
35        )}
36      />
37    </div>
38  )
39}
40