JSFiddle - React, Tailwind, and code Playground

by Rachel Gallen

HTML

<iframe id="ytPlayer" class="white_content" style="z-index: 1004;display: block;" frameborder="0" allowfullscreen="1" title="YouTube video player" width="532" height="329" src="http://www.youtube.com/embed/xHLnZMjJ8bY?autoplay=0&amp;enablejsapi=1&amp;origin=http%3A%2F%2F127.0.0.1%3A81"></iframe>
<div id="ytinfo" class="white_content" style="display: block;">
  <div id="ytName">A.R Rahman Maahi Ve Song Highway | Alia Bhatt, Randeep Hooda | Imtiaz Ali</div>
  <div id="ytDesc">
    <p>Maahi Ve Full Song (Audio) ► http://youtu.be/S1aQhVUy_9g Highway "Patakha Guddi" Song ► http://youtu.be/LijcpDrSNVI
    </p>
  </div>
</div>
<div id="modal close" class="black_overlay is-visible">
  <img onclick="closeLightBox();" src="https://airasiaxtakeover.appspot.com/imgs/1060/WhiteClose.png"></div>

CSS

.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 9999;
  -moz-opacity: 0.8;
  filter: alpha(opacity=80);
}

.white_content {
  display: none;
  position: absolute;
  top: 10%;
  left: 23%;
  width: 50%;
  height: 50%;
  padding: 16px;
  background-color: black;
  z-index: 1002;
  overflow: auto;
}

.is-visible {
  display: block;
}

JavaScript

var modal = document.getElementById('modal');
  var closeBtn = modal.querySelector('close');
  var ytVideo = modal.querySelector('.content .yt-video');
  var title = modal.querySelector('.content .title');
  var anchors = document.getElementsbyClassName("black_overlay");
  var l = anchors.length;

 for (var i = 0; i < l; i++) {
    anchors[i].addEventListener("click", function(e) {
      e.preventDefault();
      title.textContent = this.dataset.videoTitle || 'No title';
      ytVideo.src = this.href;
      modal.classList.toggle('is-visible');
      modal.focus();
    });
   }
  
  modal.addEventListener("keydown", function(e) {
    if (e.keyCode == 27) {
      title.textContent = '';
      ytVideo.src = '';
      //this.toggle('is-visible');
    }
  });
  closeBtn.addEventListener("click", function(e) {
    e.preventDefault();
    title.textContent = '';
    ytVideo.src = '';
    this.classList.toggle('is-visible');
  });