Membuat Video Responsive Dengan Jquery Based Iframe

Tutorial Cara Membuat Video Iframe Youtube Responsive Dengan Jquery

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

Buat kalian yang suka share video di blog, memakai iframe dari youtube, openload, Vimeo atau sebagainya. Bisa mencoba Jquery ini biar tampilannya responsive, suport untuk layar yang bermacam-macam ibarat pc, tablet, hp

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

Demo Embed Video Responsive With jQuery Based iFrame

Sebelumnya aku juga sudah share artikel ihwal cara menciptakan video youtube menjadi responsive di blog, tapi postingan yang sebelumnya aku memakai css @media query untuk menciptakan videonya jadi responsive..

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

Sekarang mari kita lanjut ke tutorialnya....

Minimalist jQuery Based Responsive iFrame Solution - Responsinatr

• Login ke blogger.com

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

• kalo udah ketemu, masukan instruksi 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 ibarat 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 instruksi 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 biar 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...
kalau jquerynya tidak bekerja, silahkan masukan instruksi 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 ihwal Tutorial cara menciptakan video youtube responsive di blog dengan jquery based iframe ini bermanfaat...

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