How to hide multiple videos automatically while one is displayed?

Question

Instead of using display="none"; for each video manually, is there an automatic way to do this? So that I don't have to copy/paste the same code.

(P.S. There's 21 videos, going to be hundreds eventually.)

    function showVideo1() {
        document.getElementById('video1').style.display = "block";
        document.getElementById('video2').style.display = "none";
        document.getElementById('video3').style.display = "none";
        document.getElementById('video4').style.display = "none";
        document.getElementById('video5').style.display = "none";
    }

Instead of showing and hiding video tags, could you dynamically set the url of a single video tag? — adam0101, Jul 12 '21 at 14:15

score 1 · Answer 1 · answered Jul 12 '21 at 14:25

1

you can create a classe with display="none" and give it to all ur videos if u want to show a video u remove this classe

        document.getElementById('video1').classList.add('hide');
        document.getElementById('video2').classList.remove('hide');

.hide{
 display:none;
}

<div class="hide" id="video1">
    video 1
</div>

<div class="hide" id="video2">
    video 2
</div>

answered Jul 12 '21 at 14:25

Ouss Ma L'aire Bien

115
1
6

This works too! But Sama's answer was more practical. – ChrisReaperVA Jul 12 '21 at 15:32

score 1 · Accepted Answer · answered Jul 12 '21 at 14:31

First, loop through all the <video> tags to hide them all, then show the video you want to show.

const showVideo = (videoNumber) => {
  document.querySelectorAll('video').forEach((video) => (video.style.display = "none"));
  document.querySelector(`video#video${videoNumber}`).style.display = "block";
}

score 0 · Answer 3 · answered Jul 12 '21 at 14:16

0

Try like this:

function showVideo(videoId) {
    //hide all video
    document.getElementsByTagName('video').style.display = "none";
    //show special video
    document.getElementById(videoId').style.display = "block";
}

answered Jul 12 '21 at 14:16

Lý Hoài

129
6

1

This doesn't work because `document.getElementsByTagName(...)` returns an array-like object, so you can't modify properties directly on it, you'd need to use a loop of some kind to do that – Samathingamajig Jul 12 '21 at 14:28

How to hide multiple videos automatically while one is displayed?

3 Answers3