How to disable click event on video element in youtube

Question

I am currently working on a chrome extention for youtube and I want to disable the option for the user to pause/play the video by clicking on it.

I saw some posts that say "video.off('click');" but it dosent work.

I tried this one also :

video.addEventListener('click', function(event){
    console.log("preventing?")
    event.preventDefault();
});

but still it doesn't do nothing.

I would love some help if possible - Thank you all in advance!

Edit:

I saw the comments and I want to sharpen my question. I need a solution to disabling just the click event to stop the play/pause from there.

I also need the answer to be written in a javascript file because I want to control whether or not the user can click on the video.

I've also looked in: Javascript code for disabling mouse click for youtube videos but I haven't managed to find a corrent solution to my spesific question. I saw one solution that recommend to add a transparent overlay on top of the video element but I have no idea how to do so and how to make it resize as the video player itself resizes

In css: `video { pointer-events: none }` . You could also add an absolute transparent overlay 100% width/height so it intercepts all mouse events. — Cesare Polonara, May 02 '22 at 09:55
`it doesn't do nothing` so what does it do? ... as for `video.off` that'd be a jQueery ***hack*** and would only work if jQueery was used to add a click handler — Bravo, May 02 '22 at 09:55
@CesarePolonara, is there an option to write the css inside the javascript content file? because i want to disable the click event based on changing variables — Oak_xo, May 02 '22 at 10:03
@Bravo, sorry bravo - I am not quite familiar to jQueery. I am new to the whole javascript and chrome extention world, its my first project in this material - so I got alot to learn — Oak_xo, May 02 '22 at 10:05
Does this answer your question? [Javascript code for disabling mouse click for youtube videos](https://stackoverflow.com/questions/57418481/javascript-code-for-disabling-mouse-click-for-youtube-videos) — Oleg, May 02 '22 at 10:06
@Oleg, I've looked there for answers but there is no helpful one for my spesific question. As I wrote in the question event.preventDefault does not work for some reason and I need to work within the js file so the css option is not really for me and the other one is to manipulate the player as an embeded video which I do not work with - I work with the video player that is already found on youtube itself — Oak_xo, May 02 '22 at 10:20

score 4 · Accepted Answer · answered May 02 '22 at 11:19

Attach a click listener on window + use the capture phase by specifying true for the third parameter of addEventListener + use stopPropagation, so that your listener will be the first target in the event propagation chain i.e. it'll run before the site's handlers because sites usually don't use the capture phase.

window.addEventListener('click', event => {
  if (event.target.matches('video')) {
    event.stopPropagation();
  }
}, true);

Note that if some rare site uses the exact same trick, you can still override it by declaring your content script with "run_at": "document_start".

yep this is the answer, also having a little bit of luck dispatching a custom event into my shadow wrapper using composedPath()[0], then re-emitting the real event inside where it wont come down from the window.top — definitely a hack but it does work in specific cases — neaumusic, Jul 28 '23 at 06:08

score 1 · Answer 2 · answered May 02 '22 at 11:14

You can check both the implementations here: https://stackblitz.com/edit/web-platform-4oehg4?file=index.html ( SO snippet can't embed yt iframe videos )

// HTML

 <div class="container">
      <iframe
        id="video2"
        width="100%"
        height="100%"
        src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
      ></iframe>
      <div class="overlay"></div>
    </div>

// CSS

.container {
  position: relative;
  width: 100%;
  height: 50%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Using CSS Only:

// HTML

  <iframe
      width="100%"
      height="50%"
      id="video"
      src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
    ></iframe>

// CSS

#video {
  pointer-events: none;
}

score 0 · Answer 3 · answered May 02 '22 at 10:07

0

I noticed that some websites showing youtube videos put a transparent overlay on top of the player so that the users cannot click on the "Open in YouTube" icon. This might help you too, even if it might still be able to give focus to the controls using the keyboard.

answered May 02 '22 at 10:07

Riccardo

11
2

How can I make a transparent overlay on top of the player while the player can change its' size as the user changes the webpage size? – Oak_xo May 02 '22 at 10:16
This seems more a comment than an answer. You should provide a valid solution to be considered an asnwer. – Ander2 May 03 '22 at 07:24

How to disable click event on video element in youtube

3 Answers3

Linked

Related