JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#abrirmodal">
   <div class="container">
      <img class="image" src="https://cdn.flickeringmyth.com/wp-content/uploads/2017/05/Paddington-2-posters-1-header.jpg" alt="Paddington 2 - Trailer" >
   </div>
</a>   

<div id="abrirmodal" class="modalDialog"><div>
<table border="1">
   <tr>
      <td ROWSPAN="2">
         <div id="player"></div>
      </td>
      <td>
         <a href="#fechar" title="Fechar" class="fechar">x</a>
         <h2>Modal</h2>
      </td>
   </tr>
   <tr>
      <td>
         Esta é uma simples janela de modal.
         Você pode fazer qualquer coisa aqui, página de Login, pop-ups, ou formulários.
      </td>
   </tr>
</table>

CSS

table{
   position: fixed;
   top: 10px;
   left: 0;
   background: white;
   display: none;
}

.fechar{
   padding: 10px;
   background: yellow;
}

JavaScript

var tag = document.createElement('script');

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

var player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
      height: '165,99',
      width: '250',
      videoId: 'd0D8tTtY4lU',
   });
}

$("a").on("click", function() {
   $("table").show();
   player.playVideo();
});

$(".fechar").on("click", function(e) {
   $("table").hide();
   player.stopVideo();
});