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
This commit is contained in:
parent
a5962fd556
commit
a62eedb25c
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user