Membuat Video Responsive Dengan jQuery Based iFrame

Tutorial Cara Membuat Video Iframe Youtube Responsive Dengan Jquery

Cara Mudah Membuat Video Youtube / Iframe Di Blog Menjadi Responsive, mobile friendly Dengan jquery based Iframe. Pada tutorial kali ini kita akan menjadikan iframe di blog responsive menggunakan Minimalist jQuery Based Responsive iFrame Solution - Responsinatr

Buat kalian yang suka share video di blog, menggunakan iframe dari youtube, openload, Vimeo atau sebagainya. Bisa mencoba Jquery ini agar tampilannya responsive, suport untuk layar yang beragam seperti pc, tablet, hp

Bagi kalian yang ingin melihat tamvilan iframe yang responsive, bisa kunjungi blog demo berikut ini..

Demo Embed Video Responsive With jQuery Based iFrame

Sebelumnya saya juga sudah share artikel tentang cara membuat video youtube menjadi responsive di blog, tapi postingan yang sebelumnya saya menggunakan css @media query untuk membuat videonya jadi responsive..

Bagi yang ingin mencoba tutoorial ini, silahkan kunjungi artikel berikut ini.... Cara Mudah Membuat Video Di Blog Responsive

Sekarang mari kita lanjut ke tutorialnya....

Minimalist jQuery Based Responsive iFrame Solution - Responsinatr

• Login ke blogger.com

• Pilih menu Template, Edit HTML, Cari Kode </head>

• kalo udah ketemu, masukan kode berikut di atasnya

<script src="https://rawgit.com/mastamvan/backup/master/jQuery-video-responsive.js"></script>
 <script>$(function(){$('#container').responsinatr();})</script>

• Kalo sudah, tinggal save template

• Tinggal cara pemasangannya di postingan blog

• Sebenarnya sama aja seperti biasa, tapi barang kali ada yang berbeda, silahkan ikuti cara berikut ini..

• Di postingan masuk ke tab HTML, jangan compose biar iframenya bekerja

• Terus masukan kode di bawah ini kedalamnya

• Copy Url Iframe Video Dari Youtube Terus masukan ke html berikut ini

<iframe width="560" height="315" src="https://www.youtube.com/embed/L7r2BSRYIWY" frameborder="0" allowfullscreen></iframe>

• Iframe Responsive untuk video dari vimeo

<iframe src="https://player.vimeo.com/video/1084537" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

• nah kalo yang ini untuk Google Map agar responsive

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d65331019.7272909!2d78.18333713431109!3d-1.9579296735123177!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2c4c07d7496404b7%3A0xe37b4de71badf485!2sIndonesia!5e0!3m2!1sid!2s!4v1470311192144" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Silahkan ganti urlnya dengan embed video kalian...
jika jquerynya tidak bekerja, silahkan masukan kode berikut ini di atas </head>

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

Tinggal publikasikan dan selesai...
Cukup sekian dan terima kasih, semoga artikel tentang Tutorial cara membuat video youtube responsive di blog dengan jquery based iframe ini bermanfaat...

Apabila ada yang mau dianyakan, silahkan bertanya di kolom komentar :)