Improve video loading and display with error handling and updated headers

Improves thumbnail loading in VideoCard component with error handling and updates response headers in /thumbnail route.

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/WNLqOHv

client/src/components/video-card.tsx

@@ -61,20 +61,20 @@ export default function VideoCard({ video, onClick, onShare }: VideoCardProps) {
           alt={video.title}
           className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
           data-testid={`img-thumbnail-${video.id}`}
+          onLoad={() => {
+            console.log('Thumbnail loaded successfully:', video.thumbnailUrl);
+          }}
           onError={(e) => {
-            // Create video preview iframe as fallback if thumbnail fails
+            console.error('Thumbnail failed to load:', video.thumbnailUrl);
+            // Use a data URL SVG as fallback
             const target = e.target as HTMLImageElement;
-            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>
-              `;
-            }
+            const fallbackSvg = `
+              <svg width="400" height="225" xmlns="http://www.w3.org/2000/svg">
+                <rect width="400" height="225" fill="#dc2626"/>
+                <text x="200" y="112" text-anchor="middle" fill="white" font-family="Arial" font-size="16">Thumbnail Error</text>
+              </svg>
+            `;
+            target.src = 'data:image/svg+xml;base64,' + btoa(fallbackSvg);
           }}
         />