diff --git a/content.js b/content.js index c031c12..f699280 100644 --- a/content.js +++ b/content.js @@ -402,33 +402,46 @@ container.style.position = 'relative'; - // Create blur overlay - const overlay = document.createElement('div'); - overlay.className = 'be-video-overlay'; - overlay.innerHTML = ` -
- - - -
- click to play - `; - - 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 = ` +
+ + + +
+ click to play + `; + + overlay.addEventListener('click', (e) => { + e.preventDefault(); + overlayRevealed = true; + video.play(); + overlay.remove(); + }); + + 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(); + }); }); }