JSFiddle - React, Tailwind, and code Playground

by Samir Chaves

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <div id="videoGallery">
      <ul>
        <li>Vídeo 01</li>
        <li>Vídeo 02</li>
        <li>Vídeo 03</li>
        <li>Vídeo 04</li>
        <li>Vídeo 05</li>
        <li>Vídeo 06</li>
        <li>Vídeo 07</li>
        <li>Vídeo 08</li>
      </ul>
      <div class="yesDisplay video">
        <p>Video 01</p>
     <iframe width="640" height="360"  src="https://player.vimeo.com/video/37712540"  allowfullscreen frameborder="0"></iframe>

      </div>
      <div class="video">
        <p>Video 02</p>
      <iframe frameborder="0" width="480" height="270" src="http://www.dailymotion.com/embed/video/x3hodss?autoPlay=0" allowfullscreen=""></iframe>
      </div>
      <div class="video">
        <p>Video 03</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/kIhe7nFcbUg" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="video">
        <p>Video 04</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/El3IZFGERbM" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="video">
        <p>Video 05</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="video">
        <p>Video 06</p><a href="#"></a>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/MkLFlaWxgJA" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="video">
        <p>Video 07</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/kIhe7nFcbUg" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="video">
        <p>Video 08</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/El3IZFGERbM" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>

CSS

.video {
    display:none;
}
.yesDisplay {
    display:block !important;
}
ul{
  margin: 0;
  padding: 0;
}
ul li{
  display: block;
  height: 30px;
  line-height: 30px;
  background: #333333;
  margin: 0;
  cursor: pointer;
  padding-left: 10px;
  color: #ffffff;
}
ul li:hover{
  background: #666666;
  color: #ffffff;
}
.selected{
  background: #cccccc;
  color: #333;
}

JavaScript

var buttons = $('ul li');
var videos = $('#videoGallery div');
/*
function pauseVideo() {
		var iframes = document.getElementsByTagName("iframe");
    for(var i =0; i < iframes.length; i++){
				iframes[i].src = iframes[i].src;
    }
}
*/
buttons.on('click', function (e) {
    var index = buttons.get().indexOf(this);
		var videoIndex = videos.eq(index);
    $("iframe").each(function() { 
        var src= $(this).attr('src');
        $(this).attr('src',src);  
		})
    buttons.removeClass("selected")
    $(this).toggleClass("selected")
    videos.removeClass('yesDisplay');
    videoIndex.toggleClass('yesDisplay');
    $('body').animate({scrollTop:(videoIndex.offset().top)}, 200);
  	
  //   pauseVideo();
});