Can't disable controls in a youtube video

Question

I am running a content.js on a youtube page and i want it to disable the controls of the youtube video. I am getting the video by video=document.querySelector('video'); and when trying to do: video.controls=false; it does'nt work. Would love some help

here is the video tag when I run the code on youtube's console:

Youtube doesn't use the built-in controls. It shows a separate element. Inspect it in devtools, find the selector, then hide it e.g. `elem.hidden = true` — wOxxOm, Apr 26 '22 at 17:19
@wOxxOm , how can i disable the option that when a user presses the video it starts/pauses - with the other buttons i can hide them but i cant find the element responsble for the clicking on the video itself — Oak_xo, Apr 26 '22 at 19:32
Add a listener for `play` or `pause` events on the video element. — wOxxOm, Apr 26 '22 at 20:43
@wOxxOm , what do you mean by that? how can a event listener for play or pause can help me find that element in the html? If you have the code for it I will appriciate it — Oak_xo, Apr 27 '22 at 05:38

Charlo Poitras · Answer 1 · 2022-04-26T17:09:40.190

0

let video = document.getElementById('vid');
video.removeAttribute('controls')

<div style="display:flex;flex-direction:column">
  Vid 1 :
  <video id="vid" controls>
    <source src="#" />
  </video>
  Vid 2 :
  <video id="vid2" controls>
    <source src="#" />
  </video>
</div>

See this post, on your <video> tag, you dont want to put controls if you don't want them
quick example :

<video width="400px" height="400px" controls> // this will show controls
   <source src="link" />
</video>
<video width="400px" height="400px"> // this won't show controls
   <source src="link" />
</video>

edited Apr 26 '22 at 17:09

answered Apr 26 '22 at 16:29

Charlo Poitras

198
1
14

Can you provide the html code you are using – Charlo Poitras Apr 26 '22 at 16:41
I've seen this post but it dosent help me because I'm using an already exsiting video tag. – Oak_xo Apr 26 '22 at 17:09
Can i see the video tag you are using ? where is the html of the ` – Charlo Poitras Apr 26 '22 at 17:12
I can't see the video tag too - because I am using a content script i just can hold the variable itself and there is not way of seeing the html in the code, plus remove Attribute doesn't work as well – Oak_xo Apr 26 '22 at 17:27

score 0 · Accepted Answer · answered May 02 '22 at 10:29

I've used @wOxxOm advice and figured out how to hide the play button and the timeline bar.

Here is the used code:

playButton=document.getElementsByClassName("ytp-play-button ytp-button")[0];
bar=document.getElementsByClassName("ytp-progress-bar-container")[0];

playButton.style.display="none";
bar.style.display="none";

Can't disable controls in a youtube video

2 Answers2