JSFiddle - React, Tailwind, and code Playground

by Sunny SM

HTML

<div id="container" class="youtube">
<iframe width="560" id="iframe_1" class="active" height="315" src="https://www.youtube.com/embed/2LSfj7hCuU4?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1&autoplay=0" frameborder="0" allowfullscreen="" allowscriptaccess="always"></iframe>
<iframe width="560" height="315" id="iframe_2" src="https://www.youtube.com/embed/r59xYe3Vyks?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1&autoplay=0" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
<iframe width="560" height="315" id="iframe_3" src="https://www.youtube.com/embed/LR8fQiskYII?rel=0&amp;controls=0&amp;showinfo=0&enablejsapi=1&autoplay=0" frameborder="0" allowfullscreen allowscriptaccess="always"></iframe>
</div>
<ul class="link">
<li videonId="1">Video 1</li>
<li videonId="2">Video 2</li>
<li videonId="3">Video 3</li>
</ul>

CSS

iframe{display:none;}
#container{width:560px;height:315px;overflow:hidden;border:1px solid red}
.active{display:block;}

JavaScript

$(function(){
$('.link li').on('click',function(){
 	var cElm= $(this).attr('videonId');
   cElm = '#iframe_'+cElm;
   /*This code will stop to already runing videos*/
   $('iframe').each(function(){
     this.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*')
   });
 	$('.youtube > iframe').removeClass('active');
   setTimeout(function(){
   	$(cElm).addClass("active");
     $(cElm).attr("src", $(cElm).attr("src").replace("autoplay=0", "autoplay=1"));
   },100);
 });
})();