<button onclick=”openVideoPopup()” style=”padding:12px 20px; font-size:16px; cursor:pointer;”>
▶ Watch Video
</button>
<div id=”videoPopup” style=”display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:9999;”>
<div style=”position:relative; width:90%; max-width:800px; margin:5% auto;”>
<span onclick=”closeVideoPopup()”
style=”position:absolute; top:-40px; right:0; color:#fff; font-size:30px; cursor:pointer;”>✖</span>
<iframe id=”videoFrame” width=”100%” height=”450″
src=””
frameborder=”0″
allow=”autoplay; encrypted-media”
allowfullscreen>
</iframe>
</div>
</div>
<script>
function openVideoPopup() {
document.getElementById(“videoPopup”).style.display = “block”;
document.getElementById(“videoFrame”).src =
“https://www.youtube.com/embed/D0elEIy8jdM?autoplay=1”;
}
function closeVideoPopup() {
document.getElementById(“videoPopup”).style.display = “none”;
document.getElementById(“videoFrame”).src = “”;
}
</script>
