Add video popup box in website and blogger

Add video popup box in website and blogger

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 Our Page


Top
close

Visitor Counter = visitor counter

About Us

Rakesh Tech Solutions is one of the Best and Professional Digital Marketing Angency , Trainings And Website Design And Developmen, Logo Design, Brochure Design And Mobile App Devlopement in Hyderabad, Telangana, India