diff --git a/YouTubePlaylist.astro b/YouTubePlaylist.astro
new file mode 100644
index 0000000..4d246b6
--- /dev/null
+++ b/YouTubePlaylist.astro
@@ -0,0 +1,62 @@
+---
+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>
diff --git a/index.ts b/index.ts
index e5eecb4..f5fbb3c 100644
--- a/index.ts
+++ b/index.ts
@@ -1 +1,2 @@
+export {default as YouTubePlaylist} from './YouTubePlaylist.astro'
 export {default as YouTube} from './YouTube.astro'
\ No newline at end of file
diff --git a/package.json b/package.json
index ee6de65..c3e4f14 100644
--- a/package.json
+++ b/package.json
@@ -1,17 +1,20 @@
 {
   "name": "astro-lazy-youtube-embed",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Embed YouTube videos with a static placeholder which only embeds when you click",
   "type": "module",
   "license": "MIT",
   "author": "Jonny Buchanan <jonathan.buchanan@gmail.com>",
   "exports": {
-    ".": "./index.ts"
+    ".": "./index.ts",
+    "./video": "./YouTube.astro",
+    "./playlist": "./YouTubePlaylist.astro"
   },
   "files": [
     "index.ts",
     "LICENSE",
-    "YouTube.astro"
+    "YouTube.astro",
+    "YouTubePlaylist.astro"
   ],
   "keywords": [
     "astro",
@@ -21,11 +24,11 @@
     "lazy"
   ],
   "peerDependencies": {
-    "astro": "^2.0.0 || ^3.0.0-beta || ^4.0.0-beta"
+    "astro": "^2.0.0 || ^3.0.0-beta || ^4.0.0 || ^5.0.0"
   },
   "homepage": "https://github.com/insin/astro-lazy-youtube-embed#readme",
   "repository": {
     "type": "git",
     "url": "https://github.com/insin/astro-lazy-youtube-embed.git"
   }
-}
\ No newline at end of file
+}