Cara Agar Iframe Embed Video Seperti Youtube Responsive

Cara Agar Iframe Embed Video Seperti Youtube Responsive.. Pada Tutorial Blogger Kali Ini Love Karawang 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...

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[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
       //]]>
       </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 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..