JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.youtube.com/player_api"></script>
<div id="videoSlides">
    <div class="videoSlide">
        <div id="player01"></div>
    </div>
    <div class="videoSlide">
        <div id="player02"></div>
    </div>
    <div class="videoSlide">
        <div id="player03"></div>
    </div>
</div>

CSS

#videoSlides .videoSlide {
    position:absolute;
}

JavaScript

var slideDelay = 5000;
var currentSlide = $('#videoSlides > div:first');

function doTheSlide() {
    if (window.slide === true) {
        currentSlide.hide();
        if (currentSlide.next().exists()) {
            currentSlide = currentSlide.next();
        } else {
            currentSlide = $('#videoSlides > div:first');
        }
        currentSlide.fadeIn(2000);
    }
    setTimeout(doTheSlide, slideDelay);
};

$(function () {
    // 	Add a nifty helper
    $.fn.exists = function () {
        return this.length !== 0;
    };

    // Set up the slideshow (Runs once)
    var interval;
    window.slide = true;
    jQuery(document).ready(function ($) {
        $('#videoSlides > div').hide();
        $('#videoSlides > div:first').show();
        setTimeout(doTheSlide, slideDelay);
    });
});

// Event handler for player click
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        window.slide = false;
    } else if (event.data == YT.PlayerState.ENDED || event.data == YT.PlayerState.PAUSED) {
        window.slide = true;
    }
}

(function setupPlayers() {
    if (window['YT'].loaded == 1) {
        // Sets up the players via script due to the Iframe API being buggy
        var player01 = new YT.Player('player01', {
            height: '390',
            width: '640',
            videoId: 'nCgQDjiotG0',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
        var player02 = new YT.Player('player02', {
            height: '390',
            width: '640',
            videoId: 'V70ruRzEGOI',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
        var player03 = new YT.Player('player03', {
            height: '390',
            width: '640',
            videoId: 'xgrcK9Ozb_Q',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    } else {
        setTimeout(setupPlayers,...