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="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1" frameborder="0" id="IframeVideo1" allowfullscreen></iframe>
      </div>
      <div class="video">
        <p>Video 02</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/MkLFlaWxgJA?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="video">
        <p>Video 03</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/kIhe7nFcbUg?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="video">
        <p>Video 04</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/El3IZFGERbM?enablejsapi=1" 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?enablejsapi=1" 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?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="video">
        <p>Video 07</p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/kIhe7nFcbUg?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="video">
        <p>Video 08</p>
        <iframe width="560" height="315"...

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].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
      
    }
}
buttons.on('click', function (e) {
    var index = buttons.get().indexOf(this);
		var videoIndex = videos.eq(index);
    buttons.removeClass("selected")
    $(this).toggleClass("selected")
    videos.removeClass('yesDisplay');
    videoIndex.toggleClass('yesDisplay');
    $('body').animate({scrollTop:(videoIndex.offset().top)}, 200);
    pauseVideo();
});