JSFiddle - React, Tailwind, and code Playground

by Vladimir Sobolev

HTML

<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>

JavaScript

var player, player_size;
	function onPlayerStateChange(event) {
        if (!player_size && event.target.playerInfo.videoContentRect) {
    		player_size = event.target.playerInfo.videoContentRect;
			console.log(player_size);
			event.target.setSize(player_size.width, player_size.height);
        }
    }
    function onPlayerReady(event) {
      event.target.mute();
      event.target.seekTo(0);
	  event.target.pauseVideo();
    }

    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
          width: 368,
          height: 207,
          videoId: '_xKCwzgI68s',
		  playerVars: {
		  	autoplay: 0,
			rel: 0,
			playsinline: 1,
			controls: 0,
		  },
          events: {
              onReady: onPlayerReady,
              onStateChange: onPlayerStateChange,
          }
      });
    }