Adding multiple modals to a page

Yes, I did see that, but don’t understand how to incorporate it with the modal from you and that Paul worked on:

<table align="center" width="500"><tr>
<td align="center"><a href="#" data-open-modal data-modal="1">Video #1</a></td>
<td align="center"><a href="#" data-open-modal data-modal="2">Video #2</a></td>
<td align="center"><a href="#" data-open-modal data-modal="3">Video #3</a></td>
</tr></table>
     <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">
                    <!--#INCLUDE FILE="videos/tutorial-1.asp"--> 
          </div>
          <div class="modal-content-2 hide">
            <!--#INCLUDE FILE="videos/tutorial-2.asp"--> 
          </div>
           <div class="modal-content-3 hide">
            <!--#INCLUDE FILE="videos/tutorial-3.asp"--> 
          </div>

        </div>
      </div>
    </div>
<style>
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, .5);
	opacity: 0;
	transition: opacity .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%;
	padding: 0 10px;
	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: .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;
}
@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;left:0;}
}
</style>
<script>
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 = 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');
    }

    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');

        window.setTimeout(handleShowModal(id));
    }

    var handleCloseModal = function (event) {
        if (event.target !== event.currentTarget) {
            return;
        }

        event.preventDefault();
        document.querySelector('body').classList.remove('modal-visible')
        modalOverlay.classList.remove('visible');
        modalContent.forEach(function (modal) { modal.classList.add('hide') });

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

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


</script>

This would be the embed code for each video (example video) that would come from the include file.

<body>
<center>
<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>
</center>
</body>
</html>

Thank you James!