From 0df57bbac5319103a09f34a02057563109f79f1f Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 1 Jan 2026 01:28:27 +0700
Subject: [PATCH] Fix overlay to block YouTube UI when video is paused
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

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