dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Plyr controls being blocked by overlay

Browse Source 
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>
This commit is contained in:
dwindown
2026-01-01 01:23:43 +07:00
parent 84de0a7efe
commit 91fffe9743
1 changed files with 5 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/VideoPlayerWithChapters.tsx
View File

@@ -197,23 +197,17 @@ export const VideoPlayerWithChapters = forwardRef<VideoPlayerRef, VideoPlayerWit
<> <>
{/* CSS Overlay to block YouTube UI interactions - only covers iframe */} {/* CSS Overlay to block YouTube UI interactions - only covers iframe */}
<div <div
className="absolute inset-0 z-10 pointer-events-auto" className="absolute inset-0 z-10"
style={{ background: 'transparent' }} style={{
onClick={(e) => { background: 'transparent',
// Allow clicks to pass through to Plyr controls pointerEvents: 'none'
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();
}
}} }}
/> />
<iframe <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`} 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 allowFullScreen
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
className="pointer-events-none" style={{ pointerEvents: 'none' }}
/> />
</> </>
)} )}