JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div id="modal">
    <div id="modal-body">
  <video width="100%" height="100%" controls="" autoplay name="media">
    <source src="http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type="video/mp4;codecs="avc1.42E01E, mp4a.40.2:>
</video>
    </div>
  </div>
</div>

<h1>
SOmething else here
</h1>

CSS

#wrapper {
  width: 100%;
  height: 100%;
  background-color: White;
}

#modal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  display: none;
  background-color: #000000c7;
  cursor:pointer;
}

#modal-body {
  width: 45%;
  height: 45%;
  left: 30%;
  top: 30%;
  position: relative;
  background-color: black;
  overflow: hidden;
}

#video-player {
  position: relative;
}
.modal-button{
  width:100px;
  height:25px;
  background-color:blue;
  margin:5px;
  color:white;
  border-radius:3px;
  cursor:pointer;
  text-align:Center;
}

JavaScript

class Modal {
  constructor({
    wapper,
    modal,
    link
  }) {
    this.modal = modal;
    this.modalVideo = modal.getElementsByTagName("video")[0]
    this.wrapper = wrapper;
    this.link = link;

  }
  update(src = this.link) {
    this.modalVideo.src = src
  }
  show() {
    modal.style.display = "block";
  }
  hide() {
    modal.style.display = "none";
  }
  load(){
  	const {modal,hide} = this;
      modal.addEventListener("click",function(){
    		hide();
    })
  }
}


class ModalController {
  constructor({
    videoLink,
    buttonLabel,
    videoModal
  }) {
    this.videoLink = videoLink;
    this.buttonLabel = buttonLabel;
    this.videoModal = videoModal;
  }
  run() {
  	const {videoModal, handleClick, buttonLabel, videoLink} = this;
    let button = document.createElement("div");
    button.classList.add("modal-button");
    button.textContent = this.buttonLabel;
    
    button.addEventListener("click",function(){
    	 handleClick(videoLink,videoModal)
    });
    document.body.appendChild(button)
  }
  handleClick(videoLink, videoModal) {
    videoModal.update(videoLink);
    videoModal.show();
  }
}
const videoModal = new Modal({
  wrapper: document.getElementById("wrapper"),
  modal: document.getElementById("modal"),
  link: "https://media.w3.org/2010/05/sintel/trailer.mp4"
});
videoModal.load();
const testModalButton1 = new ModalController({
  videoLink: "http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4",
  buttonLabel: "testvideo1",
  videoModal: videoModal,
})
const testModalButton2 = new ModalController({
  videoLink: "https://media.w3.org/2010/05/sintel/trailer.mp4",
  buttonLabel: "testvideo2",
  videoModal: videoModal,
})
testModalButton1.run();
testModalButton2.run();