JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="player" type="text/html" width="560" height="390" src="//www.youtube.com/embed/CMm6tDavSXg?enablejsapi=1"></iframe>
<script src="http://www.youtube.com/player_api"></script>
<script>
  var tag = document.createElement('script');

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

var player;


    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
    //videoId: 'CMm6tDavSXg',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            alert('done');
        }
    }
    
</script>