jQuery Popup iFrame Video Responsive

Minimal Responsive iFrame Video Youtube Popup Plugin For jQuery - WMBox

Cara Agar Iframe Embed Video Seperti Youtube Responsive.. Pada Tutorial Blogger Kali Ini Saya Admin Blog Mas Tamvan Akan Berbagi Tutorial Membuat Pop Up Embed Video Youtube Responsive Di Blog..




Buat kalian yang suka share embed iframe video youtube di blog, sebaiknya pasang video tersebut menjadi responsive, mobile friendly agar pengunjung dari hp (mobile) dapat melihat video denan sempurna tanpa terpotong...




Sebelumnya saya juga sudah pernah pasang tutorial membuat agar di blogger video responsive, tentunya dengan cara yang berbeda...




Buat kalian yang ingin melihat cara agar iframe di blog responsive, silahkan kunjungi artikel berikut ini...

Tutorial Blogger Lainnya :

• 
  

  
  Membuat Video Responsive Dengan jQuery Based iFrame
  

  
  


• 
  

  
  Cara Mudah Membuat Video Di Blog Responsive Dengan CSS
  

  
  


• 
  

  
  Membuat Multi Tab Video Streaming Responsive di Blog
  

  
  

Demo Tampilan Pop Up Video Responsive

Go To Demo





Sekarang kita lanjut ke tutorial cara pemasangan Popup Iframe Video Responsive dengan jQuery..

jQuery Popup On Button 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="https://www.youtube.com/embed/nij9XzAOwyk?rel=0&amp;controls=0&amp;showinfo=0">Youtube Video</a>
  </div>




Silahkan ganti url ini https://www.youtube.com/embed/nij9XzAOwyk dengan url embed iframe video kalian...

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

• Done N Selesai.

Cukup sekian dan terima kasih, sudah membaca artikel tentang Tutorial Cara Membuat Pop Up Video Youtube Responsive ini bermanfaat..




Jika ada yang mau ditanyakan, seperti button pop upnya tidak bekerja / tampil... silahkan bertanya di kolom komentar..