JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="yt-video-iframe" width="630" height="354" src="https://www.youtube.com/embed/C_JiP-j2FwM?autoplay=1&loop=1&enablejsapi=1" frameborder="0" allowfullscreen=""></iframe> <!-- note the &enablejsapi=1 --> 


<script type="text/javascript">
  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 onYouTubeIframeAPIReady() {
    		console.log("this func is automatically called");
        player = new YT.Player('yt-video-iframe', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange,
              	'onError': onPlayerError,
            }
        });
    }
    function onPlayerReady(event) {
        console.log('video is ready');
    }

    function onPlayerStateChange(event) {
        console.log(event.data);
    }
    function onPlayerError(event) {
        console.log(event.data);
    }    
</script>