How to prevent click events from bubbling up when overlaying a YouTube video?

Question

When I inject a <div> into a page on YouTube and position if over the <video> element, the "click" events that occur on that <div> still bubble up to the video. This is a problem, since two clicks in succession can trigger full screen mode on YouTube, and I would like to prevent that.

You can test this with the code below. Go to a video page on YouTube and make sure that the HTML5 video player is active (right click on video and check if you get "HTML5" in the drop down). Next, paste the code from below into the browser's console. A yellow box will appear in the upper left corner of the video. Now, double click on the box. the video will go into full screen. Notice how I try to prevent the "click" event from bubbling up in my code. What am I missing? Why is the "click" event still activating full screen mode?

document.querySelector('.html5-main-video').insertAdjacentHTML('beforebegin', 
    '<div id="test123" style="position:absolute;top:0;left:0;width:100px;'
    +'height:100px;background:yellow;z-index:1000000"><div>'
);
document.querySelector('#test123').addEventListener('click', function (e) {
    console.log('Clicked');
    e.preventDefault();
    e.stopPropagation();
    return false;
});

You can test on this video: https://www.youtube.com/watch?v=vCYk9CRx0g8

Answer 1

You need to trap the dblclick event too.