diff --git a/src/components/YouTubeEmbed.tsx b/src/components/YouTubeEmbed.tsx index bb9acc23..f8c8d6a0 100644 --- a/src/components/YouTubeEmbed.tsx +++ b/src/components/YouTubeEmbed.tsx @@ -12,6 +12,10 @@ interface YouTubeEmbedProps { * * Shows a thumbnail and play button instead of mounting the iframe immediately, * so no requests are made to YouTube until the user explicitly clicks play. + * + * Uses `sddefault.jpg` (640×480) which is the most reliable thumbnail size. + * Higher resolutions like `maxresdefault.jpg` 404 for many videos, and + * `hqdefault.jpg` can serve a gray placeholder from some YouTube CDN edges. */ export function YouTubeEmbed({ videoId, className }: YouTubeEmbedProps) { const [activated, setActivated] = useState(false); @@ -37,19 +41,13 @@ export function YouTubeEmbed({ videoId, className }: YouTubeEmbedProps) { onClick={() => setActivated(true)} aria-label="Play video" > - {/* YouTube thumbnail — maxresdefault with hqdefault fallback */} - - - - + {/* YouTube thumbnail — sddefault (640×480) is the most reliable size */} + {/* Play button — mimics the YouTube red pill shape */}