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

Improve video player functionality and enable full screen viewing

Browse Source 
Enable fullscreen and controls on video player; set iframe properties and poster URL.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 50814a1e-92e4-4968-856f-7bc7eedf5e8f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/50814a1e-92e4-4968-856f-7bc7eedf5e8f/ZePu5CD
This commit is contained in:
sebastjanartic 2025-08-04 18:55:45 +00:00
parent eb7051843c
commit 551aaee106
4 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -184,8 +184,9 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
<iframe <iframe
src={video.videoUrl} src={video.videoUrl}
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={true}
frameBorder="0"
onLoad={handleVideoPlay} onLoad={handleVideoPlay}
data-testid="video-iframe" data-testid="video-iframe"
/> />

13
client/src/index.css
View File

@ -93,4 +93,17 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
/* Video player iframe styling for better controls */
iframe[data-testid="video-iframe"] {
border: none;
outline: none;
background: #000;
}
/* Ensure fullscreen capabilities for iframe */
iframe[allowfullscreen] {
width: 100% !important;
height: 100% !important;
}
} }

5
client/src/pages/video.tsx
View File

@ -174,8 +174,9 @@ export default function VideoPage() {
<iframe <iframe
src={video.videoUrl} src={video.videoUrl}
className="w-full h-full" className="w-full h-full"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;"
allowFullScreen allowFullScreen={true}
frameBorder="0"
data-testid="video-iframe" data-testid="video-iframe"
/> />
) : ( ) : (

9
server/bunny.ts
View File

@ -52,12 +52,13 @@ export class BunnyService {
} }
private bunnyVideoToVideo(bunnyVideo: BunnyVideo): Video { private bunnyVideoToVideo(bunnyVideo: BunnyVideo): Video {
// For private videos, use iframe embed or proxy approach // For private videos, we'll generate a video poster frame from the iframe
// Generate thumbnail URL from CDN (thumbnails are usually public) // This is the best approach for private Bunny.net videos
const thumbnailUrl = `https://${this.hostname}/${bunnyVideo.guid}/thumbnail.jpg`; const thumbnailUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}?poster=true`;
// For private videos, we'll use an iframe embed URL which handles authentication // For private videos, we'll use an iframe embed URL which handles authentication
const videoUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}`; // Enable controls, allow fullscreen, and ensure player functionality
const videoUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}?controls=true&autoplay=false&preload=metadata`;
return { return {
id: bunnyVideo.guid, id: bunnyVideo.guid,