Skip to content

Fix video overlay click handling #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jnptzl wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix video overlay click handling #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 34 additions & 21 deletions content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,33 +402,46 @@

container.style.position = 'relative';

// Create blur overlay
const overlay = document.createElement('div');
overlay.className = 'be-video-overlay';
overlay.innerHTML = `
<div class="be-video-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
<polygon points="5,3 19,12 5,21" fill="currentColor"/>
</svg>
</div>
<span class="be-video-text">click to play</span>
`;

overlay.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
overlay.classList.add('be-video-revealed');
video.play();
});

container.appendChild(overlay);
let overlayRevealed = false;

const attachOverlay = () => {
if (container.querySelector('.be-video-overlay')) return null;
const overlay = document.createElement('div');
overlay.className = 'be-video-overlay';
overlay.innerHTML = `
<div class="be-video-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
<polygon points="5,3 19,12 5,21" fill="currentColor"/>
</svg>
</div>
<span class="be-video-text">click to play</span>
`;

overlay.addEventListener('click', (e) => {
e.preventDefault();
overlayRevealed = true;
video.play();
overlay.remove();
Comment on lines +420 to +424
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Stop overlay click from bubbling to page handlers

The click handler no longer calls stopPropagation(), so the overlay click now bubbles up to ancestor handlers. On pages like X/Twitter where the tweet container uses click handlers to open the tweet detail view, this means “click to play” can also navigate/open the tweet instead of just starting playback. This regression happens whenever the host page registers click handlers on ancestors of the video container, so consider restoring stopPropagation() (or otherwise preventing host clicks) to keep overlay clicks from triggering page-level navigation.

Useful? React with 👍 / 👎.

});

container.appendChild(overlay);
return overlay;
};

attachOverlay();

// Re-pause if video tries to autoplay
video.addEventListener('play', () => {
if (!overlay.classList.contains('be-video-revealed')) {
if (!overlayRevealed) {
video.pause();
}
});

video.addEventListener('pause', () => {
if (video.ended) return;
overlayRevealed = false;
attachOverlay();
});
});
}

Expand Down