JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<section id="buttons">
  <a class="btn btn-primary" id="videoModal">
       <span class="title">hello</span><br/>
  </a>
</section>

<div id="container">
 <button type="button" class="yt-close" data-target="#container">Ă—</button>
  <div id="ytplayer"></div>
</div>

CSS

#buttons a {
    display: block;
    margin-bottom: 10px;
    white-space: normal;
    padding: 6px 7px;
    width: 5Opx;
    }
    
.yt-close {
  position: absolute;
  top: 0;
  right: 0;  
}
button.yt-close {
  color: black;
  cursor: pointer;
  background: 0 0;
  border: 0;
  -webkit-appearance: none;
  display: block;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  font-size: 100px;
}

JavaScript

load_yt_player();
function load_yt_player() {
    $("#videoModal").click(function(){
      $("#video-container").fadeIn(1000);
      runPlayer( "Aph6N3FI4qI" );
    });
    
    if(document.getElementById('iframe_api') === null){
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      tag.id  = "iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    }
    
    var player;
    function runPlayer( video_id ){
      if(player) {
        player.playVideo();
        return player;
      }
      player = new YT.Player('ytplayer', {
        playerVars: {
         	autoplay: 1,
          html5: 1,
          controls: 0,
          modestbranding: 1,
          showinfo: 0,
          loop: 0,
          enablejsapi: 1,
          origin: document.domain,
          fs: 1,
          wmode: "opaque"
        },
        videoId: video_id,
        events: {
          onStateChange: function (event) {           
            if(event.data === YT.PlayerState.PAUSED){
              event.target.stopVideo();
              $("#container").hide();
            }
            // On End
            if(event.data === YT.PlayerState.ENDED){
              event.target.stopVideo();
              $("#container").hide();
            }
            // On close button click
            $(".yt-close").click(function(){
              event.target.stopVideo();
              $( $(this).data("target") ).hide();
            });
          }
        }
      });
    }
  }