How to Add Pop Up Video into a Website
How to Add Pop Up Video into a Website
<div id = "popup" class = "hidden modal">
<iframe width="510" height="315"
src="https://www.youtube.com/embed/olsr6WLxzDg">
</iframe>
<br/>
<p>
<a href=" Website And Youtube (URL)" target="_blank"><img src=" Image URl " width="310" height="150" title=" Name " alt=" Name "></a>
</p>
<div class="modal-footer">
<button type="button" class="btn btn-default" id='close' data-dismiss="modal">Close</button>
</div>
</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>
How to add video popup box in website and blogger with youtube subscribe button 2020
