JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="graylayer">
  <div id="overlayer">
    <iframe id="player" src="" frameborder="0" allowfullscreen></iframe>
    <p><a href="#" id="btnClose"> 閉じる </a></p>
  </div>
</div>
<button data-src="fPScQWW8Mzc">動画1</button>
<button data-src="C4ze-KCSxQY">動画2</button>

CSS

span {
   display:none;
}
#graylayer {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(128,128,128,0.5);
  z-index: 200;
}
#overlayer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #111;
  padding: 1em;
  border: 2px solid #CCC;
  width: 80%;
  height: 80%;
}
#player{
  width:100%;
  height: 90%;
}
 

JavaScript

$('#overlayer').click(function (evt) { 
	evt.stopPropagation();
});
$('button').click(function() {
  $('#overlayer').fadeIn(function() {
    $('#graylayer').fadeIn();    
    $('#player').attr('src', '//www.youtube.com/embed/' + $(this).data('src') + '?autoplay=1');
  }.bind(this));
});
$('#graylayer, #btnClose').click(function(){
  $('#graylayer').fadeOut(function() {
    $('#player').attr('src', '');
  });
});
$(document).on('click', '.close_link a', function() {
  $('#graylayer').fadeOut(function() {
    $('#player').attr('src', '');
  });
  return false;
});