feat(podcast): render YouTube thumbnails and click-to-load embed

List cards and episode pages hotlink the YouTube thumbnail
(maxresdefault, onerror fallback to hqdefault) when an episode has a
`youtube` id, falling back to the existing purple icon otherwise. The
single page adds a click-to-load embed facade (thumbnail poster ->
youtube-nocookie iframe on click) alongside the existing audio player,
avoiding eager iframes across 220 episodes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: HeyItsGilbert

themes/powershell-community/layouts/_default/single.html

@@ -99,6 +99,27 @@ <h3 class="font-semibold text-gray-900">Listen to this Episode</h3>
         </div>
         {{ end }}
 
+        <!-- YouTube embed (click-to-load facade) -->
+        {{ if and (eq .Section "podcast") .Params.youtube }}
+        {{ with .Params.youtube }}
+        <div class="mb-8">
+            <div id="yt-facade" data-id="{{ . }}"
+                 role="button" tabindex="0" aria-label="Play video on YouTube"
+                 class="relative aspect-video rounded-xl overflow-hidden cursor-pointer group bg-black">
+                <img src="https://img.youtube.com/vi/{{ . }}/maxresdefault.jpg"
+                     onerror="this.onerror=null;this.src='https://img.youtube.com/vi/{{ . }}/hqdefault.jpg';"
+                     alt="Watch this episode on YouTube" loading="lazy"
+                     class="w-full h-full object-cover">
+                <div class="absolute inset-0 flex items-center justify-center bg-black/20 group-hover:bg-black/30 transition-colors duration-200">
+                    <div class="w-20 h-20 bg-red-600 rounded-2xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-200">
+                        <i class="fas fa-play text-white text-3xl ml-1"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {{ end }}
+        {{ end }}
+
         <!-- Article Content -->
         <div class="prose" style="max-width: none; font-size: 1.125rem;">
             {{ .Content }}
@@ -197,5 +218,26 @@ <h4 class="text-lg font-semibold text-gray-900 mb-3 line-clamp-2">
             }
         });
     });
+
+    // Click-to-load YouTube embed facade (avoids eager iframe load)
+    (function () {
+        const facade = document.getElementById('yt-facade');
+        if (!facade) return;
+        function loadEmbed() {
+            const id = facade.dataset.id;
+            const iframe = document.createElement('iframe');
+            iframe.src = 'https://www.youtube-nocookie.com/embed/' + id + '?autoplay=1';
+            iframe.title = 'YouTube video player';
+            iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
+            iframe.allowFullscreen = true;
+            iframe.className = 'absolute inset-0 w-full h-full';
+            facade.innerHTML = '';
+            facade.appendChild(iframe);
+        }
+        facade.addEventListener('click', loadEmbed);
+        facade.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); loadEmbed(); }
+        });
+    })();
 </script>
 {{ end }}

themes/powershell-community/layouts/podcast/list.html

@@ -33,9 +33,19 @@ <h1 class="text-4xl lg:text-5xl font-bold mb-2">{{ .Site.Params.podcast.title }}
             <article class="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden podcast-episode" data-title="{{ .Title | lower }}" data-content="{{ .Summary | lower }}">
                 <div class="lg:flex">
                     <div class="lg:w-1/3 p-6 lg:pr-0">
+                        {{ $title := .Title }}
+                        {{ with .Params.youtube }}
+                        <div class="aspect-square rounded-lg overflow-hidden mb-4 lg:mb-0 bg-gray-900">
+                            <img src="https://img.youtube.com/vi/{{ . }}/maxresdefault.jpg"
+                                 onerror="this.onerror=null;this.src='https://img.youtube.com/vi/{{ . }}/hqdefault.jpg';"
+                                 alt="{{ $title }}" loading="lazy"
+                                 class="w-full h-full object-cover">
+                        </div>
+                        {{ else }}
                         <div class="aspect-square bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center mb-4 lg:mb-0">
                             <i class="fas fa-podcast text-4xl text-white"></i>
                         </div>
+                        {{ end }}
                     </div>
                     <div class="lg:w-2/3 p-6 lg:pl-8">
                         <div class="flex items-center text-purple-600 text-sm font-medium mb-3">