JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
        <div id="playlist1">
                <iframe width="640" height="360" src="http://www.youtube.com/embed/Cy8duEIHEig?wmode=opaque&list=PLsBEZ1mwPnGPlfsIpVIjygPTWcCVieesU?enablejsapi=1&rel=0&theme=light&hd=1&autohide=1&color=white&playlist=Cy8duEIHEig&list=PLsBEZ1mwPnGPlfsIpVIjygPTWcCVieesU" frameborder="0" allowfullscreen="true"></iframe>
        </div>
        <div id="playlist2">
                <iframe width="640" height="360" src="http://www.youtube.com/embed/a-TrP8Z3Cb8?wmode=opaque&list=PL2e8L_p3qh491ujHgACcQp-cf1Lfrt0El?enablejsapi=1" frameborder="0" allowfullscreen="true"></iframe>
        </div>
</div>
 
<div id="links">
<a href="#vid1" id="link1">video 1</a>
<a href="#vid2" id="link2">video 2</a>
</div>

CSS

#content {
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-320px;
        margin-top:-180px;
        width: 640px;
        height: 360px;
}
#links {
        position:absolute;
        top:3px;
}
html {
        background: url() no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

JavaScript

function hideAll()
{
	$('#content').children('div').each(function()
	{
		$(this).hide();
	});
}

function fadeAll(strClickId)
{
	var elems = $('#content').children('div'), count = elems.length;

	elems.each(function()
	{
		$(this).fadeOut(750, function()
		{
			$(this).children('iframe')[0].contentWindow.postMessage(
				JSON.stringify({
					"event": "command",
					"func": "pauseVideo",
					"args": ""
				}), "*"
			);
			if (!--count)
			{
				$(strClickId).fadeIn(750, function()
				{
					$(strClickId).children('iframe')[0].contentWindow.postMessage(
						JSON.stringify({
							"event": "command",
							"func": "playVideo",
							"args": ""
						}), "*"
					);
				});
			}
		});
	});
}

$(window).load(function()
{
	hideAll();
});

$('#links a[href^="#vid"]').click(function()
{    
	var frameId = '#playlist' + $(this).attr('href').substr(4);
	fadeAll(frameId);
});