JSFiddle - React, Tailwind, and code Playground

by bryandowning

HTML

<script src="http://www.youtube.com/iframe_api"></script>

<a style="display: block;" class="video-thumb" id="HuGbuEv_3AU" href="#">
    Megadeth: Back In The Day
</a>  
<a style="display: block;" class="video-thumb" id="jac80JB04NQ" href="#">
    Judas Priest: Metal Gods
</a> 
<a style="display: block;" class="video-thumb" id="_r0n9Dv6XnY" href="#">
    Baltimora: Tarzan Boy
</a> 
<div id="container"></div>
<div id="log">--Logging enabled--</div>

JavaScript

function log(msg) {
        jQuery('#log').prepend(msg + '<br/>');
    }

function onPlayerReady(event) {
  var $video = $(event.target.a);
  $video.css('visibility','visible');
  
  console.log(event);
}     
    jQuery(document).ready(function($) {
        jQuery('.video-thumb').click(function() {
            
            var vidId = $(this).attr('id');
            //$('#container').html('<iframe id="player_'+vidId+'" width="420" height="315" src="http://www.youtube.com/embed/' + vidId + '?enablejsapi=1&autohide=1&showinfo=0" frameborder="0" allowfullscreen></iframe>');
          $video = $('<iframe id="player_'+vidId+'" width="420" height="315" src="http://www.youtube.com/embed/' + vidId + '?enablejsapi=1&autohide=1&showinfo=0" frameborder="0" allowfullscreen></iframe>');
          
          $video.css('visibility','hidden');
          $('#container').html($video);
          
            
            new YT.Player('player_'+vidId, {
                events: {

                          'onReady': onPlayerReady
                }
            });
        });
    });