CodePen Embed - modal test

<!--
Forum question answer only:

https://www.sitepoint.com/community/t/modal-control-the-width/407915/18

-->
<div class="modal-selection"> <a href="#" data-open-modal data-modal="1">Video #1</a> <a href="#" data-open-modal data-modal="2">Video #2</a> <a href="#" data-open-modal data-modal="3">Video #3</a> </div>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<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">
        <div class="iframe-wrap">
          <iframe width="610" height="400" src="https://www.youtube.com/embed/z3cjTqCQemU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
      </div>
      <div class="modal-content-2 hide">
        <div class="iframe-wrap">
          <iframe width="610" height="400" src="https://www.youtube.com/embed/z3cjTqCQemU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
      </div>
      <div class="modal-content-3 hide">
        <div class="iframe-wrap">
          <iframe width="610" height="400" src="https://www.youtube.com/embed/z3cjTqCQemU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </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: 100%;
  min-width: 750px;
  max-width: 850px;
  max-height: 600px;
  overflow: auto;
  border: 1px solid;
  background: #fff;
  border-radius: 5px;
}
@media screen and (max-width: 750px) {
  .modal-container {
    min-width: 0;
    width: 80%;
  }
}
.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;
}
.modal-selection {
  display: flex;
  justify-content: space-between;
  max-width: 600px;
  margin: auto;
}
.iframe-wrap {
  width: 100%;
  position: relative;
  padding-top: 65%;
}
.modal-overlay iframe {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* change size with added class */
.modal-size-1 .modal-container {
  width: 100%;
  min-width: 750px;
  max-width: 850px;
  max-height: 600px;
}
.modal-size-2 .modal-container {
  width: 100%;
  min-width: 350px;
  max-width: 550px;
  max-height: 400px;
}
.modal-size-3 .modal-container {
  width: 100%;
  min-width: 350px;
  max-width: 1250px;
  max-height: 90vh;
}
/* change the above for smaller screen to all be same size */
@media screen and (max-width: 750px) {
  .modal-overlay .modal-container {
    min-width: 0;
    width: 80%;
  }
}

@media print {
  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }
  body.modal-visible * {
    visibility: hidden !important;
    height: 0;
    overflow: hidden;
    line-height: 0;
  }
  body.modal-visible .modal-overlay,
  body.modal-visible .modal-overlay * {
    visibility: visible !important;
    height: auto;
    overflow: visible;
    line-height: normal;
  }
  .modal-overlay,
  .modal-inner,
  .modal-container {
    display: block;
    width: auto;
    height: auto;
    background: #fff;
  }
  .modal-container {
    border: none;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    border-radius: 0;
    overflow: visible;
  }
  .modal-header {
    display: none;
  }
  .modal-overlay {
    position: absolute;
    top: 0;
  }
}

/* instead of js for different sizes you could use this.
.modal-container:has(.modal-content-1:not(.hide)) {
  width: 100%;
  min-width: 750px;
  max-width: 850px;
  max-height: 600px;
}
.modal-container:has(.modal-content-2:not(.hide)) {
  width: 100%;
  min-width: 350px;
  max-width: 550px;
  max-height: 400px;
}
.modal-container:has(.modal-content-3:not(.hide)) {
  width: 100%;
  min-width: 350px;
  max-width: 1250px;
  max-height: 90vh;
}
*/
/* Note width has to be 100% to stretch the table.*/

/* change the above for smaller screen to all be same size 
@media screen and (max-width: 750px) {
  .modal-overlay .modal-container {
    min-width: 0;
    width: 80%;
  }
}
*/

window.onload = function () {
  var openModalLinks = Array.prototype.slice.call(
    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 = Array.prototype.slice.call(
    document.querySelectorAll('div[class^="modal-content-"]')
  );

  var handleShowModal = function (id) {
    document.querySelector("body").classList.add("modal-visible");
    modalOverlay.classList.add("visible");
    modalOverlay.querySelector(".modal-content-" + id).classList.remove("hide");
    modalOverlay
      .querySelector(".modal-content-" + id)
      .classList.add("isPlaying");
  };

  var handleHideModal = function (event) {
    modalOverlay.classList.remove("active");
  };

  var handleOpenModal = function (event) {
    var id = event.target.getAttribute("data-modal");
    event.preventDefault();
    modalOverlay.classList.add("active");
    console.log(id);
    switch (id) {
      case "1":
        modalOverlay.classList.add("modal-size-1");
        break;
      case "2":
        modalOverlay.classList.add("modal-size-2");
        break;
      case "3":
        modalOverlay.classList.add("modal-size-3");
        break;
    }

    window.setTimeout(handleShowModal(id));
  };

  var handleCloseModal = function (event) {
    if (event.target !== event.currentTarget) {
      return;
    }
    var el = document.querySelector(".isPlaying iframe");
    event.preventDefault();
    document.querySelector("body").classList.remove("modal-visible");
    modalOverlay.classList.remove(
      "modal-size-1",
      "modal-size-2",
      "modal-size-3"
    );
    el.setAttribute("src", el.getAttribute("src"));

    modalOverlay.classList.remove("visible");
    modalContent.forEach(function (modal) {
      modal.classList.add("hide");
      modal.classList.remove("isPlaying");
    });

    modalOverlay.addEventListener("transitionend", handleHideModal, {
      once: true,
      passive: true
    });
  };

  openModalLinks.forEach(function (link) {
    link.addEventListener("click", handleOpenModal);
  });
  closeModal.addEventListener("click", handleCloseModal);
  modalInner.addEventListener("click", handleCloseModal);
};

Run Pen

This Pen is owned by Paul O'Brien on CodePen.

See more by @paulobrien on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.