From a62eedb25cc64249f6a11a3996a3f4c7207fc418 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 23:04:15 +0000
Subject: [PATCH] Fix black screen issue by properly loading video player

Update VideoPage to add a black overlay div with id 'video-overlay' that is hidden after the iframe video player loads, resolving the black screen issue reported by the user.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 344ec1e0-1186-4058-bbff-2e9619a7b1e0
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/344ec1e0-1186-4058-bbff-2e9619a7b1e0/FgaI1Sc
---
 client/src/pages/VideoPage.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 2a2d1f6..7a83188 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -434,23 +434,24 @@ export default function VideoPage() {
               )}
               {currentVideo.videoUrlIframe ? (
                 <div className="relative w-full h-full">
+                  <div className="absolute inset-0 bg-black z-10" id="video-overlay"></div>
                   <iframe
                     src={`${currentVideo.videoUrlIframe}${currentVideo.videoUrlIframe.includes('?') ? '&' : '?'}autoplay=1`}
-                    className="absolute inset-0 w-full h-full opacity-0"
+                    className="absolute inset-0 w-full h-full z-20"
                     frameBorder="0"
                     allowFullScreen
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                     onLoad={(e) => {
                       setTimeout(() => {
-                        if (e.currentTarget) {
-                          e.currentTarget.style.opacity = '1';
+                        const overlay = document.getElementById('video-overlay');
+                        if (overlay) {
+                          overlay.style.display = 'none';
                         }
-                      }, 500);
+                      }, 800);
                       handleVideoPlay();
                     }}
                     title={currentVideo.title}
                   />
-                  <div className="absolute inset-0 bg-black"></div>
                 </div>
               ) : (
                 <div className="absolute inset-0 flex items-center justify-center text-white">