diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index 0dd607d..29e8ef6 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -276,16 +276,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
           {/* Main video player */}
           <div className="flex-1">
             <div 
-              className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden cursor-pointer"
-              onClick={handleVideoClick}
-              onMouseEnter={() => setShowControls(true)}
-              onMouseLeave={() => {
-                if (controlsTimeout) {
-                  clearTimeout(controlsTimeout);
-                }
-                const timeout = setTimeout(() => setShowControls(false), 1000);
-                setControlsTimeout(timeout);
-              }}
+              className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden"
             >
               {video.videoUrlIframe ? (
                 <iframe
@@ -303,6 +294,20 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
                 </div>
               )}
               
+              {/* Invisible overlay for controls interaction */}
+              <div 
+                className="absolute inset-0 z-10 cursor-pointer"
+                onClick={handleVideoClick}
+                onMouseEnter={() => setShowControls(true)}
+                onMouseLeave={() => {
+                  if (controlsTimeout) {
+                    clearTimeout(controlsTimeout);
+                  }
+                  const timeout = setTimeout(() => setShowControls(false), 1000);
+                  setControlsTimeout(timeout);
+                }}
+                style={{ pointerEvents: showControls ? 'none' : 'auto' }}
+              ></div>
               
               {/* Navigation buttons - show/hide with controls */}
               {videos.length > 1 && (