Hide/Show video element based on button click with javascript

Question

Currently, I have HTML setup like this:

<video  autoplay="on" id="videoNohighlight" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/02/videonohighlight.mp4"></video>
<video  autoplay="on" id="video_Q1" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q1.mp4"></video>
<video  autoplay="on" id="video_Q2" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q2.mp4"></video>
<video  autoplay="on" id="video_Q3" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q3.mp4"></video>
<video  autoplay="on" id="video_Q4" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q4.mp4"></video>

<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q1">Q1</a>
<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q2">Q2</a>
<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q3">Q3</a>
<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q4">Q4</a>

and Javascript like this

function reply_click(clicked_id){
    var video = document.getElementById("video" + clicked_id);
    var videoNohighlight = document.getElementById("videoNohighlight");

    if (video.style.display === "none") {
        video.style.display = "block";
        videoNohighlight.style.display = "none";
    } else {
        video.style.display = "none !important"; 
    }               
}

JSFiddle link: https://jsfiddle.net/7x82vsah/1/

If some one clicks on all of the buttons, the buttons are acting as toggles rather than, showing one video, then when the next button is clicked, hiding the previous video and showing the new one in its place. What needs to be changed to enable this?

Thanks

thenaamsake · Accepted Answer · 2020-05-26 05:47:20Z

1

Currently when a button is pressed you are just showing or hiding that specific video but what needs to be done simultaneously is to hide all other videos when a specific video button is clicked. what you can do is add a class to all the video elements and loop through them whenever the button is clicked.

function reply_click(clicked_id){
  var videos = document.getElementsByClassName("video-tabs") // video-tabs is the class you give to all your video elements
  var videoNohighlight = document.getElementById("videoNohighlight");  
  for (var i=0; i<= videos.length -1; i++){
    if (videos[i].id == "video_"+clicked_id) {
      var isVisible = videos[i].style.display
      videos[i].style.display = isVisible === "none" ? "block" : "none";
      videoNohighlight.style.display = isVisible === "none" ? "block" : "none";
    } else {
      videos[i].style.display = "none";
    }
  }

}

edited May 26, 2020 at 5:47

answered May 25, 2020 at 16:05

thenaamsake

2843 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dave Over a year ago

Now it's not changing at all

thenaamsake Over a year ago

can you share your code snippet(both html and the js). You can do it on jsfiddle.net

Dave Over a year ago

Sure here's the link: jsfiddle.net/7x82vsah/1 This is my code btw, without the one you sent added.

thenaamsake Over a year ago

Here you go, in the above snippet I was comparing the id of button with that of the video that is why it was not working, I have fixed here, it is now working as expected. Please accept the answer if this solves your query. link: jsfiddle.net/1rjz83L0/13

Algef Almocera · Accepted Answer · 2020-05-26 04:36:47Z

0

You only need to change your function:

function reply_click(clicked_id){
  var videos = document.getElementsByTagName('video');

  for (var ctr = 0; ctr < videos.length; ctr++) {
    videos[ctr].style.display= 'none';      
  }

  var video = document.getElementById("video" + clicked_id);  
  video.style.display= 'block';
}

answered May 26, 2020 at 4:36

Algef Almocera

8391 gold badge7 silver badges10 bronze badges

2 Comments

thenaamsake Over a year ago

It is not correct to get items by tag name as there can be other video tags on the page which are not a part of this component and their styling might get affected because of this function

Algef Almocera Over a year ago

That really depends on the current context. The context at hand doesn't suggest other uses for the <video> tag. If we are really going for a better practice, I would suggest having just one <video> tag and switching src every time <a> is clicked. And for better design, one <video> tag with multiple thumbnails.

Collectives™ on Stack Overflow

Hide/Show video element based on button click with javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related