Play videos directly instead of using an embedded player for better experience

Refactor video playback in VideoModal to use direct CDN URL and update bunny.ts to use directUrl for HLS streaming.

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/Iu4fJAO

client/src/components/video-modal.tsx

@@ -180,29 +180,18 @@ 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}
-              className="w-full h-auto max-h-[80vh] aspect-video"
-              allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;"
-              allowFullScreen={true}
-              frameBorder="0"
-              onLoad={handleVideoPlay}
-              data-testid="video-iframe"
-            />
-          ) : (
-            <video
-              ref={videoRef}
-              className="w-full h-auto max-h-[80vh]"
-              controls
-              preload="metadata"
-              onPlay={handleVideoPlay}
-              data-testid="video-player"
-              crossOrigin="anonymous"
-            >
-              Your browser does not support the video tag.
-            </video>
-          )}
+          <video
+            ref={videoRef}
+            className="w-full h-auto max-h-[80vh] aspect-video"
+            controls
+            preload="metadata"
+            onPlay={handleVideoPlay}
+            data-testid="video-player"
+            crossOrigin="anonymous"
+            src={video.videoUrl}
+          >
+            Your browser does not support the video tag.
+          </video>
           
           <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
             <h3 

server/bunny.ts

@@ -55,15 +55,21 @@ export class BunnyService {
     // Use proxy endpoint for thumbnails to handle private access
     const thumbnailUrl = `/thumbnail/${bunnyVideo.guid}`;
 
-    // For private videos, use iframe embed which properly handles authentication
+    // Try direct CDN URL first - some videos might be accessible
+    const directUrl = `https://${this.hostname}/${bunnyVideo.guid}/playlist.m3u8`;
+    
+    // Fallback iframe embed for private videos
     const iframeUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}?controls=true&autoplay=false`;
+    
+    // Use direct URL for HLS streaming
+    const videoUrl = directUrl;
 
     return {
       id: bunnyVideo.guid,
       title: bunnyVideo.title || 'Untitled Video',
       description: null, // Bunny API doesn't return description in list view
       thumbnailUrl,
-      videoUrl: iframeUrl, // Use iframe for reliable playback
+      videoUrl,
       duration: Math.floor(bunnyVideo.length || 0),
       views: bunnyVideo.views || 0,
       category: bunnyVideo.category || null,