JSFiddle - React, Tailwind, and code Playground

by Chun

HTML

<div id="player1"></div>
<div id="player2"></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;
    function onYouTubeIframeAPIReady() {
        player1 = new YT.Player('player1', {
            height: '200',
            width: '520',
            videoId: 'glaG64Ao7sM',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
        player2 = new YT.Player('player2', {
            height: '200',
            width: '520',
            videoId: 'Z-48u_uWMHY',
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }
    
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
            pauseVideo(event.target.a.id);
        }
    }
    
    function pauseVideo(player_id) {
        if (player_id == "player1") {
            player2.pauseVideo();
        } else if (player_id == "player2") {
            player1.pauseVideo();
        }
    }
</script>