Update video player to use Bunny.net embed for improved streaming

Integrates Bunny.net's iframe embed for video playback on the client-side and updates the video URL format in the database storage to reflect this change.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/k4pa29Y

client/src/pages/VideoPage.tsx

@@ -254,23 +254,17 @@ export default function VideoPage() {
         <div className="flex flex-col lg:flex-row gap-6 relative z-10">
           {/* Main video section */}
           <div className="flex-1">
-            {/* Video player */}
+            {/* Video player with Bunny.net iframe */}
             <div className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden mb-4">
-              {currentVideo.videoUrlIframe ? (
-                <iframe
-                  src={currentVideo.videoUrlIframe}
-                  className="absolute inset-0 w-full h-full"
-                  frameBorder="0"
-                  allowFullScreen
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                  onLoad={handleVideoPlay}
-                  title={currentVideo.title}
-                />
-              ) : (
-                <div className="absolute inset-0 flex items-center justify-center text-white">
-                  <p>Video not available</p>
-                </div>
-              )}
+              <iframe
+                src={`https://iframe.mediadelivery.net/embed/384105/${currentVideo.id}?autoplay=false&preroll=false&responsive=true`}
+                className="absolute inset-0 w-full h-full"
+                frameBorder="0"
+                allowFullScreen
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                onLoad={handleVideoPlay}
+                title={currentVideo.title}
+              />
             </div>
 
             {/* Video info */}

server/storage.ts

@@ -79,7 +79,7 @@ export class DatabaseStorage implements IStorage {
         title: row.title,
         description: row.description,
         thumbnailUrl: row.thumbnail_url,
-        videoUrl: `https://vz-b9208a4c-8c8.b-cdn.net/${row.id}/playlist.m3u8`, // Direct HLS stream
+        videoUrl: `https://iframe.mediadelivery.net/embed/384105/${row.id}`, // Bunny.net iframe embed
         duration: row.duration,
         views: row.views,
         category: row.category,
@@ -110,7 +110,7 @@ export class DatabaseStorage implements IStorage {
         title: row.title,
         description: row.description,
         thumbnailUrl: row.thumbnail_url,
-        videoUrl: `https://vz-b9208a4c-8c8.b-cdn.net/${row.id}/playlist.m3u8`, // HLS streaming URL
+        videoUrl: `https://iframe.mediadelivery.net/embed/384105/${row.id}`, // Bunny.net iframe embed
         duration: row.duration,
         views: row.views,
         category: row.category,