From 91fffe97438d6b3bf66803a9630473c91ee389d6 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 1 Jan 2026 01:23:43 +0700
Subject: [PATCH] Fix Plyr controls being blocked by overlay
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed overlay to use pointer-events: none instead of pointer-events-auto.
This allows Plyr controls to receive clicks while still blocking YouTube iframe interactions.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/VideoPlayerWithChapters.tsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/VideoPlayerWithChapters.tsx b/src/components/VideoPlayerWithChapters.tsx
index 5d56565..1e93713 100644
--- a/src/components/VideoPlayerWithChapters.tsx
+++ b/src/components/VideoPlayerWithChapters.tsx
@@ -197,23 +197,17 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
         <>
           {/* CSS Overlay to block YouTube UI interactions - only covers iframe */}
           <div
-            className="absolute inset-0 z-10 pointer-events-auto"
-            style={{ background: 'transparent' }}
-            onClick={(e) => {
-              // Allow clicks to pass through to Plyr controls
-              const plyrControls = (e.currentTarget.parentElement as HTMLElement)?.querySelector('.plyr__controls');
-              const plyrOverlay = (e.currentTarget.parentElement as HTMLElement)?.querySelector('.plyr__control--overlaid');
-              if ((plyrControls && plyrControls.contains(e.target as Node)) ||
-                  (plyrOverlay && plyrOverlay.contains(e.target as Node))) {
-                e.stopPropagation();
-              }
+            className="absolute inset-0 z-10"
+            style={{
+              background: 'transparent',
+              pointerEvents: 'none'
             }}
           />
           <iframe
             src={`https://www.youtube-nocookie.com/embed/${youtubeId}?origin=${window.location.origin}&iv_load_policy=3&modestbranding=1&playsinline=1&rel=0&showinfo=0&controls=0&disablekb=1&fs=0`}
             allowFullScreen
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            className="pointer-events-none"
+            style={{ pointerEvents: 'none' }}
           />
         </>
       )}