From 551aaee106c3dc6c34e10193d8683fa67e7f9bea Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Mon, 4 Aug 2025 18:55:45 +0000
Subject: [PATCH] Improve video player functionality and enable full screen
 viewing

Enable fullscreen and controls on video player; set iframe properties and poster URL.

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/ZePu5CD
---
 client/src/components/video-modal.tsx |  5 +++--
 client/src/index.css                  | 13 +++++++++++++
 client/src/pages/video.tsx            |  5 +++--
 server/bunny.ts                       |  9 +++++----
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index cd3a0d9..cffb1c6 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -184,8 +184,9 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
             <iframe
               src={video.videoUrl}
               className="w-full h-auto max-h-[80vh] aspect-video"
-              allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
-              allowFullScreen
+              allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;"
+              allowFullScreen={true}
+              frameBorder="0"
               onLoad={handleVideoPlay}
               data-testid="video-iframe"
             />
diff --git a/client/src/index.css b/client/src/index.css
index 6d90eb8..aefde61 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -93,4 +93,17 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
+  
+  /* Video player iframe styling for better controls */
+  iframe[data-testid="video-iframe"] {
+    border: none;
+    outline: none;
+    background: #000;
+  }
+  
+  /* Ensure fullscreen capabilities for iframe */
+  iframe[allowfullscreen] {
+    width: 100% !important;
+    height: 100% !important;
+  }
 }
diff --git a/client/src/pages/video.tsx b/client/src/pages/video.tsx
index fb0aec8..b6dc500 100644
--- a/client/src/pages/video.tsx
+++ b/client/src/pages/video.tsx
@@ -174,8 +174,9 @@ export default function VideoPage() {
                 <iframe
                   src={video.videoUrl}
                   className="w-full h-full"
-                  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
-                  allowFullScreen
+                  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;"
+                  allowFullScreen={true}
+                  frameBorder="0"
                   data-testid="video-iframe"
                 />
               ) : (
diff --git a/server/bunny.ts b/server/bunny.ts
index d01406b..b4e46a8 100644
--- a/server/bunny.ts
+++ b/server/bunny.ts
@@ -52,12 +52,13 @@ export class BunnyService {
   }
 
   private bunnyVideoToVideo(bunnyVideo: BunnyVideo): Video {
-    // For private videos, use iframe embed or proxy approach
-    // Generate thumbnail URL from CDN (thumbnails are usually public)
-    const thumbnailUrl = `https://${this.hostname}/${bunnyVideo.guid}/thumbnail.jpg`;
+    // For private videos, we'll generate a video poster frame from the iframe
+    // This is the best approach for private Bunny.net videos
+    const thumbnailUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}?poster=true`;
 
     // For private videos, we'll use an iframe embed URL which handles authentication
-    const videoUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}`;
+    // Enable controls, allow fullscreen, and ensure player functionality
+    const videoUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}?controls=true&autoplay=false&preload=metadata`;
 
     return {
       id: bunnyVideo.guid,