CODEWITHSUNDEEP
javascripthtmlvideocustom-controls
mezzie
mezzie

Reputation: 49

Remove controls for mutliple HTML5 videos

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!

Upvotes: 1

Views: 197

Answers (1)

doubleOrt
doubleOrt

Reputation: 2507

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>

Upvotes: 1

Related Questions