Remove controls for mutliple HTML5 videos

Question

I am creating a page with videos in a grid layout. It is going to be a huge project, so I need to access the video holder from classes. I have created new controls, but I am unable to hide the original html5 controls. This works:

var player = document.getElementById('vid1');
player.removeAttribute('controls');

This does not (have also tried to apply a class and access that, but no luck):

var player = document.getElementsByTagName('video');
player.removeAttribute('controls');

How can I easily access all the video holders and hide the controls?

Thanks!

Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Durga, Nov 10 '17 at 09:30
If you really don't want controls in video element. Then remove it from its tag itself in HTML — Durga, Nov 10 '17 at 09:35

doubleOrt · Accepted Answer · 2017-11-10T10:12:53.580

document.getElementsByTagName returns an array-like object of the elements with the specified tag name in the page.

This array-like object does not have a removeAttribute method, it is just a container used to hold the elements returned by your document.getElementsByTagName call; The DOM objects in that array-like have removeAttribute methods.

You will have to iterate through the array-like and remove the attributes from each of them individually:

    var players = document.getElementsByTagName('video');
    
    for(var i = 0; i < players.length; i++) {
    players[i].removeAttribute('controls');
    }

    // the "video" HTML elements now have no "controls" attribute.
    console.log(players);

<video width="320" height="240" controls></video>
<video width="320" height="240" controls></video>
<video width="320" height="240" controls></video>

If you want to do it all in 1 statement (I prefer this one, we are borrowing Array#map):

Array.prototype.map.call(document.getElementsByTagName("video"), function(el){
el.removeAttribute("controls");
});

<video width="320" height="240" controls></video>
<video width="320" height="240" controls></video>
<video width="320" height="240" controls></video>

Remove controls for mutliple HTML5 videos

1 Answers1