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&list=PLsBEZ1mwPnGPlfsIpVIjygPTWcCVieesU?enablejsapi=1&rel=0&theme=light&hd=1&autohide=1&color=white&playlist=Cy8duEIHEig&list=PLsBEZ1mwPnGPlfsIpVIjygPTWcCVieesU" frameborder="0" allowfullscreen></iframe>
        </div>
        <div id="playlist2">
                <iframe width="640" height="360" src="http://www.youtube.com/embed/a-TrP8Z3Cb8?list=PL2e8L_p3qh491ujHgACcQp-cf1Lfrt0El?enablejsapi=1" frameborder="0" allowfullscreen></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;
        bottom: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

/* elt: Optionally, a HTMLIFrameElement. This frame's video will be played,
     *       if possible. Other videos will be paused*/
    function playVideoAndPauseOthers(frame) {
        $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
            var func = this === frame ? 'playVideo' : 'pauseVideo';
            this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
        });
    }
    $('#links a[href^="#vid"]').click(function() {
        var frameId = /#vid(\d+)/.exec($(this).attr('href'));
        if (frameId !== null) {
            frameId = frameId[1]; // Get frameId
            playVideoAndPauseOthers($('#playlist' + frameId + ' iframe')[0]);
                        $($('#playlist' + frameId + ' iframe')[0]).fadeIn(750);
                        //When hovering, fadeIn.
                        $('#content').mouseenter(function(){
                                $($('#playlist' + frameId)[0]).fadeIn(750);
                        });
                        //When leaving, fadeOut.  
                        $($('#playlist' + frameId)[0]).mouseleave(function(){
                                $($('#playlist' + frameId)[0]).fadeOut(750);
                        });
        }
    });