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 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 biar pengunjung dari hp (mobile) sanggup melihat video denan tepat tanpa terpotong...

Sebelumnya aku juga sudah pernah pasang tutorial menciptakan biar di blogger video responsive, tentunya dengan cara yang berbeda...

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

Tutorial Blogger Lainnya :

• Membuat Video Responsive Dengan jQuery Based iFrame

• Cara Praktis 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 isyarat </body>, sehabis ketemu, masukan isyarat 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 gres terus masuk ke mode HTML jangan Compose, lihat gambar

• Sekarang kalian copy isyarat di bawah ini kemudian 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 perihal Tutorial Cara Membuat Pop Up Video Youtube Responsive ini bermanfaat..

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