35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { youtubeVideoId } from '../lib/youtube'
|
|
|
|
export default function YouTubePlayer({ url }: { url: string }) {
|
|
const [loaded, setLoaded] = useState(false)
|
|
const id = youtubeVideoId(url)
|
|
return (
|
|
<figure style={{ margin: '1.5rem 0' }}>
|
|
<div style={{ aspectRatio: '16 / 9', width: '100%', background: '#111827', borderRadius: '0.5rem', overflow: 'hidden' }}>
|
|
{loaded && id ? (
|
|
<iframe
|
|
src={`https://www.youtube-nocookie.com/embed/${id}`}
|
|
title="مشغل فيديو YouTube"
|
|
referrerPolicy="strict-origin-when-cross-origin"
|
|
allow="encrypted-media; picture-in-picture; fullscreen"
|
|
allowFullScreen
|
|
ref={frame => { frame?.focus() }}
|
|
tabIndex={0}
|
|
style={{ display: 'block', width: '100%', height: '100%', border: 0 }}
|
|
/>
|
|
) : (
|
|
<button type="button" onClick={() => setLoaded(true)} style={{ width: '100%', height: '100%', background: 'transparent', color: '#fff', border: 0, cursor: 'pointer', font: 'inherit' }}>
|
|
تشغيل فيديو YouTube
|
|
</button>
|
|
)}
|
|
</div>
|
|
<figcaption>
|
|
<a href={url} target="_blank" rel="noopener noreferrer" className="text-link">شاهد الفيديو على YouTube</a>
|
|
</figcaption>
|
|
</figure>
|
|
)
|
|
}
|