JSFiddle - React, Tailwind, and code Playground

by Dmitry Khmil

HTML

<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
<div>
<iframe width="200" height="200" src="https://www.youtube-nocookie.com/embed/mlVtQDVrNns?rel=0&amp;showinfo=0" frameborder="0" gesture="media" allowfullscreen></iframe>
</div>
<div>
<iframe width="200" height="200" src="https://www.youtube-nocookie.com/embed/HTPziLzmVCE?rel=0&amp;showinfo=0" frameborder="0" gesture="media" allowfullscreen></iframe>
</div>
<div>
<iframe width="200" height="200" src="https://www.youtube-nocookie.com/embed/irSoaOXhbGw?rel=0&amp;showinfo=0" frameborder="0" gesture="media" allowfullscreen></iframe>
</div>
<div>
<iframe width="200" height="200" src="https://www.youtube-nocookie.com/embed/DI7imXBhC4A?rel=0&amp;showinfo=0" frameborder="0" gesture="media" allowfullscreen></iframe>
</div>

CSS

div {display:inline-block;border:2px solid red;}

JavaScript

$(document).ready(function(){
      var nowPlaying = "none";

          $('div').click(function(){
          	  nowPlaying = $(this).find('iframe').attr('src');
         			$(this).find('iframe').attr('src',nowPlaying+'&autoplay=1');
          }, function(){
              $(this).find('iframe').attr('src',nowPlaying);
          });
});