JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<div id="youtube-link">
    <iframe class="play_y" width="500" height="280" src="" frameborder="0" allowfullscreen></iframe>
</div>


<div class="video" href="RFhNJ8ozDBk">Hey, Allan, Allan</div>
<div class="video" href="rJ4LUFRKNPQ">Yanis Marshall Heels Choreography</div>

CSS

#youtube-link{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background:#000;
    white-space: nowrap;
	text-align:center;
}

#youtube-link:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
#youtube-link .play_y{{
	width: 500px;
	height: 280px;
	display: inline-block;
	vertical-align: middle;
	white-space: normal;
	position: relative;
	padding:0;
	margin:0;
	overflow: hidden;
	z-index:10;
}

JavaScript

$('#youtube-link').hide();

$('div.video').each(function(){
    var link = $(this).attr('href');
    $(this).click(function(){
        $('#youtube-link').find('.play_y').attr('src','https://www.youtube.com/embed/' + link + '?&autoplay=1');
    	$('#youtube-link').fadeIn(600);
        $('#youtube-link').click(function(){
        	$(this).fadeOut(600);
        	$(this).find('.play_y').attr('src','');
        });
    });
});