JSFiddle - React, Tailwind, and code Playground

HTML

<div id="videoSlides">
    <div class="videoSlide">
        <iframe id="player01" src="http://www.youtube.com/embed/nCgQDjiotG0?version=3&amp;enablejsapi=1" width="640" height="390"></iframe>
    </div>
    <div class="videoSlide">
        <iframe id="player02" src="http://www.youtube.com/embed/V70ruRzEGOI?version=3&amp;enablejsapi=1" width="640" height="390"></iframe>
    </div>
    <div class="videoSlide">
        <iframe id="player03" src="http://www.youtube.com/embed/xgrcK9Ozb_Q?version=3&amp;enablejsapi=1" width="640" height="390"></iframe>
    </div>
</div>

CSS

#videoSlides .videoSlide {
    position:absolute;
}

JavaScript

// load the YouTube player API
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// setup the slideshow
var interval;
jQuery(document).ready(function ($) {
    $('#videoSlides > div').hide();
    $('#videoSlides > div:first').show();
    var doTheSlide = function () {
        $('#videoSlides > div:first')
            .fadeOut(0)
            .next()
            .fadeIn(2000)
            .end()
            .appendTo('#videoSlides');
    };
    var delay = 5000;
    interval = setInterval(doTheSlide, delay);
});

// event handler for player click
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        clearInterval(interval);
    }
}

var player01;
var player02;
var player03;

// will be called when the YouTube API has loaded, setup the players
function onYouTubeIframeAPIReady() {
    player01 = new YT.Player('player01', {
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
    player02 = new YT.Player('player02', {
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
    player03 = new YT.Player('player03', {
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}