From 5893851508f75aed487ef6ae219b04cec9113402 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 21:08:53 +0000
Subject: [PATCH] Improve video player controls for a better viewing experience

Update iframe styling and add mouse event listeners to ensure video player controls remain visible and interactive for longer periods, enhancing user experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/YyBJOrR
---
 client/index.html                           | 17 ++++++++++
 client/src/components/bunny-video-modal.tsx | 36 +++++++++++++++++++--
 2 files changed, 50 insertions(+), 3 deletions(-)
diff --git a/client/index.html b/client/index.html
index 9e54067..026a2e9 100644
--- a/client/index.html
+++ b/client/index.html
@@ -25,6 +25,23 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="theme-color" content="#3b82f6" />
+    
+    <style>
+      /* Force video controls to stay visible longer and be more accessible */
+      iframe {
+        pointer-events: auto !important;
+        cursor: pointer !important;
+      }
+      
+      iframe:hover {
+        opacity: 1 !important;
+      }
+      
+      /* Ensure iframe controls area is always interactive */
+      iframe[src*="iframe"] {
+        z-index: 10 !important;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>
diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index bc20c80..c96793d 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -258,16 +258,27 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
         <div className="flex-1 flex flex-col lg:flex-row gap-4 min-h-0">
           {/* Main video player */}
           <div className="flex-1">
-            <div className="relative w-full aspect-video bg-black rounded-lg overflow-hidden">
+            <div 
+              className="relative w-full aspect-video bg-black rounded-lg overflow-hidden"
+              onMouseMove={() => {
+                const iframe = document.querySelector('iframe');
+                if (iframe) {
+                  iframe.style.pointerEvents = 'auto';
+                }
+              }}
+            >
               {video.videoUrlIframe ? (
                 <iframe
-                  src={`${video.videoUrlIframe}&controls=1&controlsTimeout=8000`}
-                  className="absolute inset-0 w-full h-full"
+                  src={video.videoUrlIframe}
+                  className="absolute inset-0 w-full h-full hover:opacity-100"
                   frameBorder="0"
                   allowFullScreen
                   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                   onLoad={handleVideoPlay}
                   title={video.title}
+                  style={{
+                    pointerEvents: 'auto'
+                  }}
                 />
               ) : (
                 <div className="absolute inset-0 flex items-center justify-center text-white">
@@ -275,6 +286,25 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                 </div>
               )}
               
+              {/* Invisible overlay to keep controls active longer */}
+              <div 
+                className="absolute inset-0 bg-transparent"
+                style={{ pointerEvents: 'none' }}
+                onMouseEnter={() => {
+                  const iframe = document.querySelector('iframe');
+                  if (iframe && iframe.contentWindow) {
+                    // Trigger a mouse move event in the iframe to keep controls visible
+                    iframe.contentWindow.postMessage('{"method":"showControls"}', '*');
+                  }
+                }}
+                onMouseMove={() => {
+                  const iframe = document.querySelector('iframe');
+                  if (iframe && iframe.contentWindow) {
+                    iframe.contentWindow.postMessage('{"method":"showControls"}', '*');
+                  }
+                }}
+              />
+              
               {/* Navigation buttons - always visible */}
               {videos.length > 1 && (
                 <>
