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

@@ -97,6 +97,27 @@ <h3 class="font-semibold text-gray-900">Listen to this Episode</h3>
             </audio>
         </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;">
@@ -191,5 +212,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">