diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index f8c59c8..ded2469 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -60,9 +60,17 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
decoding="async"
onError={(e) => {
const target = e.target as HTMLImageElement;
- target.style.display = 'none';
- if (target.parentElement) {
- target.parentElement.style.background = 'linear-gradient(45deg, #374151, #4b5563)';
+ // Try backup thumbnail URL
+ const backupUrl = `https://iframe.mediadelivery.net/embed/476412/${video.id}/thumbnail.jpg`;
+ if (!target.src.includes('iframe.mediadelivery.net')) {
+ target.src = backupUrl;
+ } else {
+ // If both fail, show placeholder
+ target.style.display = 'none';
+ if (target.parentElement) {
+ target.parentElement.style.background = 'linear-gradient(45deg, #374151, #4b5563)';
+ target.parentElement.innerHTML += '
Video
';
+ }
}
}}
/>
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index d42edd7..1779868 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -244,7 +244,17 @@ export default function VideoPage() {
className="w-full h-full object-cover"
onError={(e) => {
const target = e.target as HTMLImageElement;
- target.style.display = 'none';
+ // Try backup thumbnail URL
+ const backupUrl = `https://iframe.mediadelivery.net/embed/476412/${video.id}/thumbnail.jpg`;
+ if (!target.src.includes('iframe.mediadelivery.net')) {
+ target.src = backupUrl;
+ } else {
+ target.style.display = 'none';
+ if (target.parentElement) {
+ target.parentElement.style.background = 'linear-gradient(45deg, #374151, #4b5563)';
+ target.parentElement.innerHTML += 'Video
';
+ }
+ }
}}
/>
diff --git a/server/bunny.ts b/server/bunny.ts
index e1d91a5..20b92d6 100644
--- a/server/bunny.ts
+++ b/server/bunny.ts
@@ -52,8 +52,9 @@ export class BunnyService {
}
private bunnyVideoToVideo(bunnyVideo: BunnyVideo): Video {
- // Generate thumbnail URL from CDN (thumbnails are usually public)
+ // Generate multiple thumbnail URL options
const thumbnailUrl = `https://${this.hostname}/${bunnyVideo.guid}/thumbnail.jpg`;
+ const backupThumbnailUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}/thumbnail.jpg`;
// Generate signed HLS URL for private video access
const hlsUrl = this.generateSignedUrl(bunnyVideo.guid);