Improve video playback and thumbnail display for private videos

Implement iframe embeds for private Bunny.net videos with thumbnail proxying.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 50814a1e-92e4-4968-856f-7bc7eedf5e8f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/50814a1e-92e4-4968-856f-7bc7eedf5e8f/ZOHnS9w

client/src/components/video-card.tsx

@@ -62,9 +62,19 @@ export default function VideoCard({ video, onClick, onShare }: VideoCardProps) {
           className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
           data-testid={`img-thumbnail-${video.id}`}
           onError={(e) => {
-            // Fallback to a default thumbnail if image fails to load
+            // Create video preview iframe as fallback if thumbnail fails
             const target = e.target as HTMLImageElement;
-            target.src = `https://images.unsplash.com/photo-1611162617474-5b21e879e113?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=450`;
+            const container = target.parentElement;
+            if (container) {
+              container.innerHTML = `
+                <iframe 
+                  src="https://iframe.mediadelivery.net/embed/476412/${video.id}?preload=metadata&muted=true&controls=false&poster=true"
+                  class="w-full h-full object-cover"
+                  frameborder="0"
+                  style="pointer-events: none;"
+                ></iframe>
+              `;
+            }
           }}
         />