Popup YouTube Video On Click With Frame HTML Script for Blogger and Website

Hello there, if you are looking for the script code that helps to popup a youtube embed video with iframe on a single click. Then, you are on the right page. And, I hope this code will help you a lot.

In order to add this HTML script to your website or Blog even Blogspot, you just need to customize the code which I highlighted below with yellow background colour, Next, add that code wherever you want to place. Afterward, you are done!

You could modify this code even host yourself with your own risk, if not please do not remove the W3schools and Cloudflare links, as a result, the code will not work. As well, this code belongs to w3schools, and we just modified and share to you guys for education purpose. If you want to know more regarding this code or commercial use please kindly contact them directly.
This picture is the demo of following below code


<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" /><link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /><div class="w3-container w3-display-topmiddle w3-margin-bottom">      <button onclick="if (!window.__cfRLUnblockHandlers) return false; document.getElementById('id01').style.display='block'" class="w3-button w3-xlarge w3-theme w3-hover-teal" title="Click Here To Watch Now" data-cf-modified-13e8ca69c125346d13cb879d-="">Viral Cage TV </button>  </div><div id="id01" class="w3-modal">  <div class="w3-modal-content w3-card-4 w3-animate-top">    <header class="w3-container w3-teal w3-display-container">       <span onclick="if (!window.__cfRLUnblockHandlers) return false; document.getElementById('id01').style.display='none'" class="w3-button w3-teal w3-display-topright" data-cf-modified-13e8ca69c125346d13cb879d-=""><i class="fa fa-remove"></i></span>      <h4></h4>      <h5> <i class="fa fa-smile-o">Oh snap! You're watching a Viral Cage TV!</i></h5>    </header>    <div class="w3-container">      <p></p><style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//s1DV4AqszEM' frameborder='0' allowfullscreen></iframe></div>      </div>    <footer class="w3-container w3-teal">      <p>Powered by Viral Cage</p>    </footer>  </div></div><script src="https://ajax.cloudflare.com/cdn-cgi/scripts/95c75768/cloudflare-static/rocket-loader.min.js" data-cf-settings="13e8ca69c125346d13cb879d-|49" defer=""></script>

Congratulation you have installed this code successfully. If it is useful for you please consider sharing this to your friends too, thank you

No comments

Powered by Blogger.