Fix overlay to block YouTube UI when video is paused

Track playback state and show overlay with pointer-events:auto when paused,
pointer-events:none when playing. This blocks YouTube UI (copy link, logo)
when video is paused or initially loaded, while allowing Plyr controls.

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

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

src/components/VideoPlayerWithChapters.tsx

@@ -35,6 +35,7 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
   const wrapperRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<Plyr | null>(null);
   const [currentChapterIndex, setCurrentChapterIndex] = useState<number>(-1);
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
 
   // Detect if this is a YouTube URL
   const isYouTube = videoUrl && (
@@ -92,6 +93,11 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
 
     playerRef.current = player;
 
+    // Track play/pause state to show/hide overlay
+    player.on('play', () => setIsPlaying(true));
+    player.on('pause', () => setIsPlaying(false));
+    player.on('ended', () => setIsPlaying(false));
+
     // Apply custom accent color
     if (accentColor) {
       const style = document.createElement('style');
@@ -195,12 +201,12 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
     <div ref={wrapperRef} className={`plyr__video-embed relative ${className}`}>
       {youtubeId && (
         <>
-          {/* CSS Overlay to block YouTube UI interactions - only covers iframe */}
+          {/* CSS Overlay to block YouTube UI interactions - shows when paused */}
           <div
             className="absolute inset-0 z-10"
             style={{
               background: 'transparent',
-              pointerEvents: 'none'
+              pointerEvents: isPlaying ? 'none' : 'auto'
             }}
           />
           <iframe