Fix youtube embed

client/src/components/YouTubePlayer/YouTubePlayer.jsx

@@ -4,17 +4,18 @@ import './styles.sass';
 const YouTubePlayer = ({ 
   videoId, 
   autoplay = false, 
-  volume = 50,
   startTime = 45,
   onReady = () => {},
   onError = () => {},
+  onPlayerReady = null,
   className = ''
 }) => {
   const iframeRef = useRef(null);
   const playerRef = useRef(null);
   const [isLoaded, setIsLoaded] = useState(false);
+  const [customStartTime] = useState(startTime);
   
-  console.log("YouTubePlayer rendering with videoId:", videoId, "volume:", volume, "startTime:", startTime);
+  console.log("YouTubePlayer rendering with videoId:", videoId, "startTime:", startTime);
 
   useEffect(() => {
     if (!window.YT) {
@@ -58,18 +59,38 @@ const YouTubePlayer = ({
             'showinfo': 0,
             'rel': 0,
             'autoplay': autoplay ? 1 : 0,
-            'start': startTime
+            'start': startTime,
+            'modestbranding': 1,
+            'fs': 0,
           },
           events: {
             'onReady': (event) => {
-              console.log("YouTube player ready");
-              event.target.setVolume(volume);
-              if (autoplay) {
-                event.target.seekTo(startTime);
-                event.target.playVideo();
+              const player = event.target;
+              console.log("YouTube player ready event fired");
+
+              playerRef.current = player;
+              
+              try {
+                  const hasSeekTo = typeof player.seekTo === 'function';
+                  console.log(`Player has seekTo: ${hasSeekTo}`);
+                  
+                  // Start playback if needed
+                  if (autoplay) {
+                      player.seekTo(startTime || 0);
+                      player.playVideo();
+                  }
+
+                  setIsLoaded(true);
+                  onReady();
+                  
+                  if (typeof onPlayerReady === 'function') {
+                      console.log("Providing player instance to parent");
+                      onPlayerReady(player);
+                  }
+              } catch (err) {
+                  console.error("Error in player ready handler:", err);
+                  onError(err);
               }
-              setIsLoaded(true);
-              onReady();
             },
             'onError': (event) => {
               console.error("YouTube player error:", event);
@@ -94,21 +115,20 @@ const YouTubePlayer = ({
         }
       }
     };
-  }, [videoId, autoplay, onReady, onError, startTime]);
+  }, [videoId, autoplay, onReady, onError, startTime, customStartTime]);
 
   useEffect(() => {
-    if (playerRef.current && isLoaded) {
-      console.log("Setting YouTube volume to:", volume);
+    if (playerRef.current && isLoaded && customStartTime !== startTime) {
       try {
-        playerRef.current.setVolume(volume);
+        playerRef.current.seekTo(customStartTime);
       } catch (error) {
-        console.error("Error setting volume:", error);
+        console.error("Error seeking to time:", error);
       }
     }
-  }, [volume, isLoaded]);
+  }, [customStartTime, isLoaded]);
 
   return (
-    <div className={`youtube-player-container ${className}`}>
+    <div className={`youtube-player-container visible-player ${className}`}>
       <div ref={iframeRef} className="youtube-embed" />
     </div>
   );