JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="youtube">play</a>
<div id="modalvideo">
    <div id="player"></div>
</div>

CSS

#modalvideo {
  width: 300px;
  height: 300px;
  background: red;
}

JavaScript

var player;
var playWhenReady = false;

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

window.onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
  console.log('API is ready');
  player = new YT.Player("player", {
    height: $('#modalvideo').height() * 0.9,
    width: $('#modalvideo').width() * 0.9,
    videoId: "NeeTGjp5-Ag",
    playerVars: {
      origin: 'http://fiddle.jshell.net',
    },
    events: {
      onReady: onYouTubePlayerReady
    }
  })
}

function onYouTubePlayerReady(e) {
  console.log('Player is ready');
  player.isReady = true;
  if (playWhenReady) {
    playVideo();
  }
}

function playVideo() {
  console.log('playVideo');
  if (player && player.playVideo) {
    console.log('now');
    //$("#modalvideo").modal("show");
    player.playVideo();
    return;
  } else {
    console.log('postpone');
    playWhenReady = true;
  }
}

$(document).ready(function() {
  $(".youtube").on("click", function(e) {
    e.preventDefault();
    playVideo();
  });
});