JSFiddle - React, Tailwind, and code Playground

HTML

<div id="player1"></div>
<div id="player2"></div>
<div id="player3"></div>

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

    var player1;
    var player2;
    var player3;

    function onYouTubeIframeAPIReady() {
        player1 = new YT.Player('player1', {
            height: '350',
            width: '425',
            videoId: 'OdT9z-JjtJk',
            events: {
                'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
            }
        });
        player2 = new YT.Player('player2', {
            height: '350',
            width: '425',
            videoId: 'CogIXrea6A4',
            events: {
                      'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
             
            }
        });
        player3 = new YT.Player('player3', {
            height: '350',
            width: '425',
            videoId: 'CTEw9HE_IXY',
            events: {
                      'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
             
            }
        });
        
    }
    
    

    function onPlayerReady(event) {
        event.target.playVideo();
    }
		var done = false;
    function onPlayerStateChange(event) {
    
        if (player1.getPlayerState() == 1 ||  player1.getPlayerState()==3 ) {
            player2.stopVideo();
            player3.stopVideo();

        }
        if (player2.getPlayerState() == 1 ||  player2.getPlayerState()==3 ) {
            player1.stopVideo();
            player3.stopVideo();

            
        }
    }

</script>