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">×</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!
