YouTubePlaylist.astro

---
interface Props extends Omit<astroHTML.JSX.IframeHTMLAttributes, 'src' | 'srcdoc'> {
  class?: string
  cookie?: boolean
  embedParams?: Record<string, string | number | boolean>
  loading?: 'eager' | 'lazy'
  title: string
  videoId?: string // Optional for playlists
  list?: string // For playlists
}

const { 
  class: className = '', 
  cookie = false, 
  embedParams = {}, 
  loading = 'lazy', 
  title, 
  videoId, 
  list 
} = Astro.props as Props;

// Construct the embed URL
let baseUrl = `https://www.youtube${cookie ? '' : '-nocookie'}.com/embed`;
let embedUrl = list
  ? `${baseUrl}/videoseries?list=${list}`
  : `${baseUrl}/${videoId}?${new URLSearchParams(embedParams).toString()}`;

// Decide thumbnail behavior for single videos
let srcdoc = videoId && !list
  ? `
  <style>
    * { padding: 0; margin: 0; overflow: hidden; }
    html, body { height: 100%; background: #000; display: flex; align-items: center; justify-content: center; }
    img { max-width: 100%; height: auto; border: none; }
    .play-button { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); cursor: pointer; }
  </style>
  <a href="${embedUrl}" target="_self">
    <img src="https://i.ytimg.com/vi/${videoId}/mqdefault.jpg" alt="${title}" loading="${loading}" />
    <svg class="play-button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48" width="68" height="48">
      <path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 
      C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 
      C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path>
      <path d="M 45,24 27,14 27,34" fill="#fff"></path>
    </svg>
  </a>`
  : null; // No `srcdoc` for playlists
---

<div
  class={`relative overflow-hidden ${className}`}
  style="aspect-ratio: 16/9;" 
>
  <iframe
    src={embedUrl}
    title={title}
    srcdoc={srcdoc || undefined}
    loading={loading}
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    class="absolute inset-0 w-full h-full border-none"
    style="border-radius: inherit;" />
</div>