JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div id="player"></div>
<!--iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/u3THavMxNDE?autoplay=1&enablejsapi=1&rel=0&showinfo=0&autohide=1&color=white&theme=light"
frameborder="0" allowfullscreen-->
<!--iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/Zhawgd0REhA?autoplay=1&enablejsapi=1&rel=0&showinfo=0&autohide=1&theme=light"
frameborder="0" allowfullscreen>--

CSS

#player {
    height: 300px;
    background: pink;
}

JavaScript

window.onYouTubeIframeAPIReady = function(){
     var player;
    
      function playerReady() {
        player = new YT.Player('player', {
          height: '380',
          width: '630',
          videoId: 'u1zgFlCw8Aw',
          playerVars: {
              autoplay: 1,
              enablejsapi: 1,
              rel: 0,
              showinfo: 0,
              autohide: 1,
              theme: 'light',
              allowfullscreen: 1
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
    
    function onPlayerReady(event) {
        event.target.playVideo();
      }
    
      function onPlayerStateChange(event) {
          console.log(event.data === YT.PlayerState.ENDED)
          if (event.data === YT.PlayerState.ENDED) {
            
          }
      }
    
    playerReady();            
}
    
    
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);