jQuery Popup iFrame Video Responsive

• Login Ke blogger.com
• Terus Pilih Tab Template, Edit HTML Cari Kode </head>
• Kalo sudah ketemu, masukan css dibawah ini tepat di atasnya

<style type='text/css'>
/*Pop Up Responsive*/
.container{margin:100px auto}
.btnnya{background-color:#039be5;border:0;border-radius:2px;box-shadow:none;color:white!important;;cursor:pointer;display:inline-block;font:500 14px/20px Roboto,sans-serif;margin:0;min-width:36px;outline:0;overflow:hidden;padding:8px;text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;transition:background-color .2s,box-shadow .2s;vertical-align:middle;white-space:nowrap;padding:7px 16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}
.btnnya.yt{background-color:red}
.wmBox_overlay{position:fixed;width:100%;height:100%;display:none;top:0;left:0;background:rgba(0,0,0,0.5);z-index:999}
.wmBox_centerWrap{display:table;position:absolute;width:100%;height:100%}
.wmBox_centerer{display:table-cell;vertical-align:middle}
.wmBox_centerer iframe{width:95%;display:table;margin:0 auto;position:relative}
.wmBox_contentWrap{width:50%;margin:0 auto;position:relative}
.wmBox_scaleWrap{position:relative;height:0;padding-top:20px;padding-bottom:56.25%;width:100%}
.wmBox_centerer iframe{position:absolute;top:0;border:0;outline:0;box-shadow:0 0 10px rgba(0,0,0,0.5);left:0;width:100%;height:100%;padding:12px;background:black;border-radius:12px}
.wmBox_closeBtn{z-index:2;position:relative;margin-top:-40px}
.wmBox_closeBtn p{line-height:0;margin:0;padding:0.5em 0 0.75em;color:#FFF;background:#000;width:1.3em;font-size:25px;border-radius:100%;text-align:center;font-family:Verdana,serif;position:relative;bottom:-0.5em;right:-1.5em;cursor:pointer;float:right;box-shadow:0 0 10px rgba(0,0,0,0.5);transition:color 0.2s ease-out,background 0.2s ease-out}
.wmBox_closeBtn p:hover{background:#FFF;color:#000}
</style>

Langkah berikutnya, cari kode </body>, setelah ketemu, masukan kode dibawah ini tepat diatasnya...

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$.wmBox()}),function(o){o.wmBox=function(){o("body").prepend('<div class="wmBox_overlay"><div class="wmBox_centerWrap"><div class="wmBox_centerer">')},o("[data-popup]").click(function(e){e.preventDefault(),o(".wmBox_overlay").fadeIn(750);var a=o(this).attr("data-popup");o(".wmBox_overlay .wmBox_centerer").html('<div class="wmBox_contentWrap"><div class="wmBox_scaleWrap"><div class="wmBox_closeBtn"><p>x</p></div><iframe src="'+a+'">'),o(".wmBox_overlay iframe").click(function(o){o.stopPropagation()}),o(".wmBox_overlay").click(function(e){e.preventDefault(),o(".wmBox_overlay").fadeOut(750)})})}(jQuery);
//]]>
</script>

• Langkah pemasangan scriptnya suah selesai, tinggal save...
• Sekarang tinggal memasukan pop up videonya ke postingan..
• Silahkan bikin postingan baru terus masuk ke mode HTML jangan Compose, lihat gambar

Sekarang kalian copy kode di bawah ini lalu masukan ke postingan mode HTMLnya

  <div class="container">
    <a class="wmBox btnnya yt" href="#" data-popup="LINK_YOUTUBE_ANDA?rel=0&amp;controls=0&amp;showinfo=0">Youtube Video</a>
  </div>

Note : Silahkan ganti tulisan LINK_YOUTUBE_ANDA dengan url embed iframe video kalian...

• Nah kalo sudah, tinggal save postingannya dan lihat hasilnya..