JSFiddle - React, Tailwind, and code Playground

HTML

<div class="modal-video">
  <iframe width="450" height="278" src="https://www.youtube.com/embed/s2xq3VN13kc" frameborder="0" allowfullscreen></iframe>
</div>
<div class="back-modal"></div>

CSS

.modal-video {
  position: fixed;
  width: 450px;
  height: 278px;
  top: 200px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: white;
  z-index: 9997;
}

.back-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9995;
}

JavaScript

$(document).ready(function() {
  $('.back-modal').on('click', function() {
    $('.modal-video').hide();
  });
});