Add video popup box in website and blogger
How to add video popup box in website and blogger with youtube subscribe button 2020
Below code valid for blogger, Html, PHP, Wordpress Coding Website
Code is Below
<div id = "popup" class = "hidden modal">
<iframe width="510" height="315"
src="https://www.youtube.com/embed/olsr6WLxzDg">
</iframe>
<br/>
<p>
<a href=" Link (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>
follow on twitter
Follow @digitalrakeshs
Follow Our Page