How can I create filters for embedded videos?

Question

I want to create a nav link that when clicked, filters the videos on the page tagged with a data filter. Can this be done with HTML? Do I need jQuery?

<ul class="nav navbar-nav navbar-left">
  <li><a href="#" data-filter="video1" tabindex="-1">Video 2</a></li>
  <li><a href="#" data-filter="video2" tabindex="-1">Video 1</a></li>
</ul>

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
        <h4>Video 2 title</h4>
            <div class="embed-responsive embed-responsive-16by9" data-filter="video2">
            <iframe class="embed-responsive-item" src="video2" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe>
            </div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
        <h4>Video 1 title</h4>
            <div class="embed-responsive embed-responsive-16by9" data-filter="video1">
            <iframe class="embed-responsive-item" src="video1" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe>
            </div>
</div>

Answer 1

You will need some kind of javascript if you want to manipulate what is visible to the user.

Its probably as easy to use id and class values to simplify things.

<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 video video2">
        <h4>Video 2 title</h4>
            <div class="embed-responsive embed-responsive-16by9" >
            <iframe class="embed-responsive-item" src="video2" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe>
            </div>
</div>

Then you can use

<ul class="nav navbar-nav navbar-left">
  <li><a href="#" id="video1" class="videoFilterBtn" tabindex="-1">Video 2</a></li>
  <li><a href="#" id="video2" class="videoFilterBtn" tabindex="-1">Video 1</a></li>
</ul>

and your script will be

$( document ).ready(function() {
    $(".videoFilterBtn").on("click", function(e){
        e.preventDefault() // stop default click events like navigation
        $(".video").hide() // hide all videos
        $("#" + $(this).prop("id")).show() // show the one with class matching this element id
    }
});

What I have done is add 2 classes to the top level div wrapping the video iframes. One is a generic 'video' class which is used to quickly hide all videos, and the other matches the video number you had in the data-filter such as 'video2'.

I then added an id attribute to each of the a elements, and also a class to hook them into the click event.

The script says:

1. find any elements with a class = videoFilterBtn
2. attach to them a click event which will
3. stop the default browser click behaviour;
4. hide any elements with a 'video' class (and their children)
5. show any elements with a class matching the clicked elements id value.

If you want sexier effects change the .hide() for .fadeOut() and the .show() for .fadeIn().

You will also need to link to jquery.

PS. You might want to consider using object instead of iframes to host your videos.