JSFiddle - React, Tailwind, and code Playground

by SL_A_SH

HTML

<div id="playerWrapOuter">
  <div id="playerWrap">
      <iframe
          width="640" height="360"
          src="https://www.youtube-nocookie.com/embed/9C1leq--_wM?rel=0&enablejsapi=1&autohide=1&showinfo=0&modestbranding=1"
          frameborder="0"
          allowfullscreen="allowfullscreen"
      ></iframe>
  </div>
</div>

JavaScript

(function() {
      let playerFrame = document.querySelector("iframe");
    
      let tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      let firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      let player;
      window.onYouTubeIframeAPIReady = function() {
          player = new YT.Player(playerFrame, {
              events: {
                'onStateChange': onPlayerStateChange
              }
          });
      };
      window.onPlayerStateChange = function(event) {
       
      };
      
      
  })();