'Can't disable controls in a youtube video

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

content.js

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

javascripthtmlgoogle-chrome-extensionhtml5-video


Solution 1:[1]

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";

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Oak_xo
Solution 2

Related Questions