1. Go to your blogger account
2. Visit Template, then Edit HTML
3. Copy the following code to the above]]> </ b: skin>
CSS
============
a.popup-link { padding:17px 0; text-align:center; margin:7% auto; position:relative; width:220px; color:#fff; text-decoration:none; background-color:#FFBA00; border-radius:3px; box-shadow:0 5px 0 0 #eea900; display:block; }
a.popup-link:hover { background-color:#ff9900; box-shadow:0 3px 0 0 #eea900; -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; }
#popup { position:fixed;visibility:hidden; opacity:0; margin-top:-300px; }
#popup:target { visibility:visible; opacity:1; background-color:rgba(255,255,255,0.7); position:fixed; top:0; left:0; right:0; bottom:0; margin:0; z-index:99999999999; -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; }
@media (min-width:768px) { .popup-container { width:600px; } }
@media (max-width:767px) { .popup-container { width:100%; } }
.popup-container { position:relative; margin:7% auto; padding:30px 50px; background-color:#333; color:#fff; border-radius:3px; }
a.popup-close { position:absolute; top:3px; right:3px; background-color:#fff; padding:7px 10px; font-size:20px; text-decoration:none; line-height:1; color:#333; }
4. Copy the following code where you want the button to show up
HTML
=============
<div id="closed"></div>
<a href="#popup" class="popup-link">Watch Youtube Video</a>
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<center>
<embed allowfullscreen="true" height="375" src="https://www.youtube.com/v/ZwwytNpaNJg?fs=1&amp" type="application/x-shockwave-flash" width="580"></embed>
<a class="widgetku" href="http://www.rithiseth.com" id="widgetku" target="blank">RithiSeth.Com</a>
</center>
<a class="popup-close" href="#closed">X</a>
</div>
</div>
Note: Please modify the YouTube Video ID ZwwytNpaNJg Video // width Width: // Height: The height of the video on demand.
