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>