<a href="#" data-open-modal data-modal="1"><img src="http://www.pmob.co.uk/mobile/images/a1.jpg" class="test"></a><br>
  <a href="#" data-open-modal data-modal="2">Modal 2</a>

  <div class="modal-overlay">
    <div class="modal-inner">
      <div class="modal-container">
        <div class="modal-header">
          <a href="#" class="modal-close">&times;</a>
        </div>
        <div class="modal-content-1 hide">Hello from modal 1</div>
        <div class="modal-content-2 hide">
          Hello from modal 2
        </div>
           <div class="modal-content-3 hide">
        <div class="iframe-wrap">
         ----- youtube iframe code goes here -----
        </div>
      </div>
      </div>
    </div>
  </div>

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal-overlay.active {
  display: table;
}

.modal-overlay.visible {
  opacity: 1;
}

.modal-inner {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  margin: 0 auto;
  width: 50%;
  min-width: 750px;
  max-width: 850px;
  max-height: 600px;
  overflow: auto;
  border: 1px solid;
  background: #fff;
  border-radius: 5px;
}

.modal-header {
  text-align: right;
}

.modal-close {
  margin-right: 0.25em;
  color: inherit;
  text-decoration: none;
  font-size: 2rem;
  font-weight: bold;
}

.modal-content {
  padding: 0 10px;
}

.modal-content p {
  margin: 0 0 1em;
}

.hide {
  display: none;
}

p.open {
  margin: 1em;
  text-align: center;
  font-size: 1em;
  font-weight: 600;
  color: #4c659b;
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
}
.test {
  width: 100px;
  height: auto;
}

window.onload = function () {
  var [...openModalLinks] = document.querySelectorAll("[data-open-modal]");
  var closeModal = document.querySelector(".modal-close");
  var modalOverlay = document.querySelector(".modal-overlay");
  var modalInner = document.querySelector(".modal-inner");
  var modalContent = document.querySelector(".modal-inner");
  var [...modalContent] = document.querySelectorAll(
    'div[class^="modal-content-"]'
  );
  var handleShowModal = function (id) {
    modalOverlay.classList.add("visible");
    modalOverlay.querySelector(`.modal-content-${id}`).classList.remove("hide");
  };
  var handleHideModal = function (event) {
    modalOverlay.classList.remove("active");
  };
  var handleOpenModal = function (event) {
    /*var id = event.target.getAttribute('data-modal');
     */
    var id = event.currentTarget.dataset.modal;
    console.log(id);
    event.preventDefault();
    modalOverlay.classList.add("active");
    window.setTimeout(handleShowModal(id));
  };
  var handleCloseModal = function (event) {
    if (event.target !== event.currentTarget) {
      return;
    }
    event.preventDefault();
    modalOverlay.classList.remove("visible");
    modalContent.forEach((modal) => modal.classList.add("hide"));
    modalOverlay.addEventListener("transitionend", handleHideModal, {
      once: true,
      passive: true
    });
  };
  openModalLinks.forEach((link) =>
    link.addEventListener("click", handleOpenModal)
  );
  closeModal.addEventListener("click", handleCloseModal);
  modalInner.addEventListener("click", handleCloseModal);
};