JSFiddle - React, Tailwind, and code Playground

HTML

<script src="ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <div class="overlaybg"> </div><div class="youtubeV">
<div class="wrap">
	<div class="col-3">
               <div class="videoThum"> <a href="javascript:;"  rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="http://s14.postimg.org/oi0rf9ki9/play_1.jpg"/></a></div>
               <div class="videoThum"> <a href="javascript:;"  rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="http://s14.postimg.org/oi0rf9ki9/play_1.jpg"/></a></div>
               <div class="videoThum"> <a href="javascript:;"  rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="http://s14.postimg.org/oi0rf9ki9/play_1.jpg"/></a></div>
            </div>
         </div>
</div>
</div>
      <div class="popup youtube">
         <a class="close" href="javascript:;" >X</a>
         <div class="video-container">
            <div class="iframe">
               <h2></h2>
               <iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
            </div>
         </div>
      </div>

CSS

div.col-3 {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count:3;
    column-gap:10px;
    margin:20px 30px;
}
.wrap {
    margin: 0 auto;
    width: 900px;
}
 .popup {
    background: #fff;
    border-radius: 5px;
    display: none;
    padding: 10px;
    position: absolute;
    width: 800px;
    z-index: 10;
}
.popup a.close {
    z-index: 999;
    background: #000;
    color: #fff;
    font-weight: bold;
    display: block;
    font-size: 20px;
    padding: 5px;
    position: absolute;
    right: -5px;
    top: -15px;
}
.overlaybg {
    background: #000;
    display: none;
    height: 100%;
    opacity: 0.7;
    position: fixed;
    width: 100%;
    z-index: 6;
}
.youTubeVideo:hover {
    opacity: 0.5;
    background-color: #ffffff;
}
.videoThum img{
border:2px solid #000;
}
.videoThum:hover {
    background-image: url('http://www.californiagrinders.com/images/playbutton.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
}

JavaScript

$(function(){
  $('.youTubeVideo').click(function(){
 		var vidtitle = $(this).parents('.videoThum').next('.videoInfo').find('h2').text();
		$('.video-container .iframe h2').text(vidtitle);
		var winWidth = $(window).width();
        var winHeight = $(window).height();
        var centerDiv = $('.popup');
        var left = winWidth / 2 - ((parseInt(centerDiv.css("width"))) / 2);
        var top = winHeight / 2 - ((parseInt(centerDiv.css("height"))) / 2);
        centerDiv.css({'left': left,'top': '35%'});
    		$('.youtube').show();
		  $('.popup.youtube, .overlaybg').show();
		 $("html,body").animate({scrollTop: 0}, 700);
 		var ind = $(this).parents('.videoThum').addClass('aaa').parents('.guideBox').siblings().find('.videoThum').removeClass('aaa');	
		var linkSrc = $(this).parents('.videoThum').find('a').attr('rel');
		 $('.youtube .video-container').find('iframe').attr('src', linkSrc);
	});	
	
	$('.close, .overlaybg').click(function(){
		$('.youtube .video-container').find('iframe').attr('src', '');							
		$('.popup.youtube, .overlaybg').hide();
	});	
	});