diff --git a/client/src/pages/LivePage.tsx b/client/src/pages/LivePage.tsx
index 46b4d6f..e9ed8cf 100644
--- a/client/src/pages/LivePage.tsx
+++ b/client/src/pages/LivePage.tsx
@@ -46,22 +46,30 @@ export default function LivePage() {
     updateMetaTag('og:type', 'video.other');
   }, []);
 
-  useEffect(() => {
-    const initializePlayer = async () => {
-      console.log('🔴 LivePage: Starting to initialize player...');
-      
-      if (!videoRef.current) {
-        console.error('🚨 Video ref not available!');
-        return;
-      }
+  // Callback ref to properly handle video element mounting
+  const videoCallbackRef = (element: HTMLVideoElement | null) => {
+    if (element) {
+      videoRef.current = element;
+      console.log('🔴 Video element mounted, initializing player...');
+      initializePlayer();
+    }
+  };
 
-      console.log('🔴 Video element found, continuing...');
+  const initializePlayer = async () => {
+    console.log('🔴 LivePage: Starting to initialize player...');
+    
+    if (!videoRef.current) {
+      console.error('🚨 Video ref not available!');
+      return;
+    }
 
-      try {
-        // Load HLS.js if not already loaded
-        console.log('🔴 Checking if HLS.js is loaded...');
-        if (!window.Hls) {
-          console.log('🔴 Loading HLS.js script...');
+    console.log('🔴 Video element found, continuing...');
+
+    try {
+      // Load HLS.js if not already loaded
+      console.log('🔴 Checking if HLS.js is loaded...');
+      if (!window.Hls) {
+        console.log('🔴 Loading HLS.js script...');
           const script = document.createElement('script');
           script.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.8';
           script.async = true;
@@ -220,20 +228,6 @@ export default function LivePage() {
       }
     };
 
-    // Add a small delay to ensure DOM is ready
-    const timer = setTimeout(() => {
-      initializePlayer();
-    }, 200);
-
-    return () => {
-      clearTimeout(timer);
-      if (hlsRef.current) {
-        console.log('🧹 Destroying HLS instance');
-        hlsRef.current.destroy();
-      }
-    };
-  }, []);
-
   const togglePlayPause = () => {
     if (videoRef.current) {
       if (isPlaying) {
@@ -326,7 +320,7 @@ export default function LivePage() {
                 )}
                 
                 <video
-                  ref={videoRef}
+                  ref={videoCallbackRef}
                   className="w-full h-full bg-black"
                   playsInline
                   controls