Improve video playback and address video player issues reported by users

Updates video player to prioritize HLS streaming and adds iframe and MP4 fallbacks.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: aa92e7e2-ec62-4c92-b21b-02ef78a664c2
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/aa92e7e2-ec62-4c92-b21b-02ef78a664c2/VbkE0SA
This commit is contained in:
sebastjanartic
2025-08-04 20:28:42 +00:00
parent d6408b7df6
commit ecb86b1873
3 changed files with 18 additions and 28 deletions
+9 -24
View File
@@ -180,30 +180,15 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
</Button>
<div className="relative bg-black rounded-lg overflow-hidden">
{video.videoUrl.includes('iframe.mediadelivery.net') ? (
<iframe
src={`${video.videoUrl}?controls=true&autoplay=false&loop=false&muted=false&preload=metadata`}
className="w-full h-auto max-h-[80vh] aspect-video"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen"
allowFullScreen
onLoad={handleVideoPlay}
data-testid="video-iframe"
title={video.title}
/>
) : (
<video
ref={videoRef}
className="w-full h-auto max-h-[80vh]"
controls
preload="metadata"
onPlay={handleVideoPlay}
data-testid="video-player"
crossOrigin="anonymous"
>
<source src={video.videoUrl} type="video/mp4" />
Your browser does not support the video tag.
</video>
)}
<iframe
src={video.videoUrlIframe || `https://iframe.mediadelivery.net/embed/${process.env.BUNNY_LIBRARY_ID}/${video.id}`}
className="w-full h-auto max-h-[80vh] aspect-video"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen"
allowFullScreen
onLoad={handleVideoPlay}
data-testid="video-iframe"
title={video.title}
/>
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
<h3