jQuery Popup iFrame Video Responsive

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...



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

  • jQuery Popup iFrame Video Responsive
  • 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..

9 komentar
  1. Bisa ga gan ditambahkan fungsi tombol next prev, atau multi tab video?

    ReplyDelete
    Replies
    1. Seperti ini gan? ↓
      Popup Video Streaming With Multi Tab
      https://output.jsbin.com/hicafeleje

      Delete
    2. Iya bener gan hihi.
      Ada scriptnya gan? Minta dong gan :p

      Delete
    3. Itu tinggal klik edit aja, kodenya udah ada semua d situ (y)
      atau
      https://jsbin.com/hicafeleje/edit?html,output

      Delete
    4. Makasih banyak gan hihi

      Delete
  2. Pas baru pasang script cssnya, header sama body jadi kepisah gan.
    Itu kenapa ya?

    ReplyDelete
    Replies
    1. Css ini ga ngaruh ke header gan..
      / coba rubah idnya, d bedain..

      Delete
  3. Gan kalau vidionya ga keluar gmna gan? iframe youtube linknya udah di masuk dan a hrefnya udh mask gmna gan ? sama bisa ga vidio clipnya diganti untuk play musik

    ReplyDelete
    Replies
    1. masukin url ytnya di dalam data-popup bukan di href.
      .
      Untuk music dari youtube bisa coba pake artikel ini ↓
      .
      https://mastamvan.blogspot.co.id/2017/11/cara-memasang-musik-dari-youtube-ke-blog.html

      Delete