Fix video player bugs and improve overlay behavior

Fixed issues:
1. Duration now displays correctly using Plyr's time tracking instead of YouTube API
2. Chapter jump functionality now works using Plyr's currentTime property
3. Overlays now properly avoid Plyr controls - only show when paused/ended
4. Hidden YouTube's native play button with CSS

Key changes:
- Use Plyr's native time tracking (player.currentTime) instead of YouTube API
- Jump to time uses Plyr's seek (player.currentTime = time, then play)
- Top overlay only appears when paused/ended (not when playing)
- Paused/ended overlays start at bottom: 80px to avoid Plyr controls
- Added CSS to hide .ytp-large-play-button and .html5-video-player background
- Moved time tracking to onReady callback to ensure player is initialized
- Removed dependencies on chapters from useEffect to prevent re-initialization

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/VideoPlayerWithChapters.tsx

@@ -113,6 +113,7 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
         iv_load_policy: 3,
         modestbranding: 1,
         controls: 0,
+        customControls: true,
       },
       controls: [
         'play-large',
@@ -145,27 +146,12 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
       // Create YouTube Player instance
       const ytPlayer = new window.YT.Player(iframe, {
         events: {
-          onStateChange: (event: any) => {
+          onReady: () => {
-            const state = event.data;
+            // Set up time tracking for chapters using Plyr's time
-            setYtPlayerState(state);
-
-            // -1 = unstarted, 0 = ended, 1 = playing, 2 = paused, 3 = buffering, 5 = video cued
-            if (state === 1) {
-              setIsPlaying(true);
-            } else if (state === 2 || state === 0) {
-              setIsPlaying(false);
-            }
-          },
-        },
-      });
-
-      ytPlayerRef.current = ytPlayer;
-
-      // Set up time tracking for chapters
             intervalRef.current = setInterval(() => {
-        if (ytPlayer && ytPlayer.getCurrentTime) {
+              if (playerRef.current) {
-          const currentTime = ytPlayer.getCurrentTime();
+                const currentTime = playerRef.current.currentTime;
-          if (onTimeUpdate) {
+                if (onTimeUpdate && currentTime > 0) {
                   onTimeUpdate(currentTime);
                 }
 
@@ -190,6 +176,22 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
                 }
               }
             }, 500);
+          },
+          onStateChange: (event: any) => {
+            const state = event.data;
+            setYtPlayerState(state);
+
+            // -1 = unstarted, 0 = ended, 1 = playing, 2 = paused, 3 = buffering, 5 = video cued
+            if (state === 1) {
+              setIsPlaying(true);
+            } else if (state === 2 || state === 0) {
+              setIsPlaying(false);
+            }
+          },
+        },
+      });
+
+      ytPlayerRef.current = ytPlayer;
     };
 
     // Initialize YouTube player when API is ready
@@ -213,6 +215,13 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
         .plyr__progress__buffer {
           color: ${accentColor}40 !important;
         }
+        /* Hide YouTube's native play button */
+        .ytp-large-play-button {
+          display: none !important;
+        }
+        .html5-video-player {
+          background: #000;
+        }
       `;
       document.head.appendChild(style);
 
@@ -230,7 +239,7 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
       }
       player.destroy();
     };
-  }, [isYouTube, ytApiReady, accentColor, chapters, currentChapterIndex, onChapterChange, onTimeUpdate]);
+  }, [isYouTube, ytApiReady, accentColor]);
 
   // Prevent context menu and unwanted interactions
   const preventAction = (e: React.MouseEvent) => {
@@ -240,19 +249,13 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
 
   // Jump to specific time
   const jumpToTime = (time: number) => {
-    if (ytPlayerRef.current) {
+    if (playerRef.current) {
-      ytPlayerRef.current.seekTo(time, true);
-      ytPlayerRef.current.playVideo();
-    } else if (playerRef.current) {
       playerRef.current.currentTime = time;
       playerRef.current.play();
     }
   };
 
   const getCurrentTime = () => {
-    if (ytPlayerRef.current) {
-      return ytPlayerRef.current.getCurrentTime() || 0;
-    }
     return playerRef.current ? playerRef.current.currentTime : 0;
   };
 
@@ -288,7 +291,8 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
 
           {/* --- Strategic Overlays to Block YouTube UI --- */}
 
-          {/* 1. Block "Copy Link" and Title on top (always on) */}
+          {/* 1. Block "Copy Link" and Title on top (only when paused or not started) */}
+          {(ytPlayerState === -1 || ytPlayerState === 5 || ytPlayerState === 2 || ytPlayerState === 0) && (
             <div
               style={{
                 position: 'absolute',
@@ -304,6 +308,7 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
               onClick={preventAction}
               title="Educational content - external links disabled"
             />
+          )}
 
           {/* 2. Block "YouTube" logo - Bottom right (always on) */}
           <div
@@ -322,8 +327,8 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
             title="Educational content - external links disabled"
           />
 
-          {/* 3. Block "Watch on YouTube" - Bottom left (before video starts) */}
+          {/* 3. Block "Watch on YouTube" - Bottom left (before video starts or paused) */}
-          {(ytPlayerState === -1 || ytPlayerState === 5) && (
+          {(ytPlayerState === -1 || ytPlayerState === 5 || ytPlayerState === 2) && (
             <div
               style={{
                 position: 'absolute',
@@ -341,15 +346,15 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
             />
           )}
 
-          {/* 4. Block "More Videos" overlay - When paused */}
+          {/* 4. Block "More Videos" overlay - When paused (below the controls area) */}
           {ytPlayerState === 2 && (
             <div
               style={{
                 position: 'absolute',
-                bottom: '15%',
+                bottom: '80px',
                 left: 0,
                 right: 0,
-                height: '30%',
+                height: 'calc(100% - 140px)',
                 zIndex: 6,
                 backgroundColor: 'transparent',
                 pointerEvents: 'auto',
@@ -360,15 +365,15 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
             />
           )}
 
-          {/* 5. Block related videos overlay - When video ends */}
+          {/* 5. Block related videos overlay - When video ends (below the controls area) */}
           {ytPlayerState === 0 && (
             <div
               style={{
                 position: 'absolute',
-                bottom: '13%',
+                bottom: '80px',
                 left: 0,
                 right: 0,
-                height: '87%',
+                height: 'calc(100% - 140px)',
                 zIndex: 7,
                 backgroundColor: 'transparent',
                 pointerEvents: 'auto',