How To Add Popup Video Button For Blogger Website | Popup Video Notification For Blogger ๐ฅ
<div id = "popup" class = "hidden modal">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="auto" src="https://www.youtube-nocookie.com/embed/80cJhv0DAmY?&autoplay=1&rel=0" title="YouTube video player" width="100%"></iframe></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id='close' data-dismiss="modal">Close</button>
</div>
<style>
#popup {
display: inline-block;
opacity: 0;
position: fixed;
top: 20%;
left: 50%;
padding: 1em;
transform: translateX(-50%);
background: #fff;
border: 1px solid #888;
box-shadow: 1px 1px .5em 0 rgba(0, 0, 0, .5);
transition: opacity .3s ease-in-out;
z-index:99999;
}
#popup.hidden {
display: none;
}
#popup.fade-in {
opacity: 1;
}
</style>
<script>
window.onload = function () {
/* Cache the popup. */
var popup = document.getElementById("popup");
/* Show the popup. */
popup.classList.remove("hidden");
/* Fade the popup in */
setTimeout(()=>popup.classList.add("fade-in"));
/* Close the popup when a city is selected. */
document.getElementById("close").onclick = function () {
/* Fade the popup out */
popup.classList.remove("fade-in");
/* Hide the popup. */
setTimeout(()=>popup.classList.add("hidden"), 300);
};
};
</script>
