diff --git a/src/components/VideoPlayerWithChapters.tsx b/src/components/VideoPlayerWithChapters.tsx
index 1e93713..b2516c9 100644
--- a/src/components/VideoPlayerWithChapters.tsx
+++ b/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