JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<div id="player1"></div>
<div id="player2"></div>
<div id="player3"></div>
<div id="player4"></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 player;
    var vids = [];

    function onYouTubeIframeAPIReady() {
        player1 = new YT.Player('player1', {
            height: '200',
            width: '400',
            videoId: 'gbug3zTm3Ws',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
        vids.push(player1);
        player2 = new YT.Player('player2', {
            height: '200',
            width: '400',
            videoId: 'JFBUJ6kNl28',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
         vids.push(player2);
        
        player3 = new YT.Player('player3', {
            height: '200',
            width: '400',
            videoId: 'pUjE9H8QlA4',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
        vids.push(player3);
        
        player4 = new YT.Player('player4', {
            height: '200',
            width: '400',
            videoId: 'saz1vsk69KI',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
        vids.push(player4);
    }
    
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            stopVideo(event.target.a.id);
        }
    }
    
    function stopVideo(player_id) {
    
      for(var i=0;i<vids.length;i++){
        if (player_id !=vids[i].a.id)
          vids[i].stopVideo();
      }
    }
</script>