Fix Plyr controls being blocked by overlay

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

@@ -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' }}
           />
         </>
       )}