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>


Next Post Previous Post