sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enable controls and fullscreen mode on videos within the viewing window

Browse Source 
Modify video-modal.tsx to enable controls, autoplay and fullscreen for embedded videos.

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/cqLZGoI
This commit is contained in:
sebastjanartic 2025-08-04 20:24:39 +00:00
parent 882787f433
commit d6408b7df6
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/video-modal.tsx
View File

@ -182,12 +182,13 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
<div className="relative bg-black rounded-lg overflow-hidden"> <div className="relative bg-black rounded-lg overflow-hidden">
{video.videoUrl.includes('iframe.mediadelivery.net') ? ( {video.videoUrl.includes('iframe.mediadelivery.net') ? (
<iframe <iframe
src={video.videoUrl} src={`${video.videoUrl}?controls=true&autoplay=false&loop=false&muted=false&preload=metadata`}
className="w-full h-auto max-h-[80vh] aspect-video" className="w-full h-auto max-h-[80vh] aspect-video"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen"
allowFullScreen allowFullScreen
onLoad={handleVideoPlay} onLoad={handleVideoPlay}
data-testid="video-iframe" data-testid="video-iframe"
title={video.title}
/> />
) : ( ) : (
<video <video
@ -199,6 +200,7 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
data-testid="video-player" data-testid="video-player"
crossOrigin="anonymous" crossOrigin="anonymous"
> >
<source src={video.videoUrl} type="video/mp4" />
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>
)} )}