Satu lagi dokumentasi saya hari ini, saya termasuk orang yang mulai merambah dunia youtube dan mulai mengupload beberapa tutorial kedalam youtube sebagai tambahan dari pelengkap dalam menjelaskan artikel yang sedang saya bahas. Sobat bisa melihat beberapa postingan saya pada blog ini, namun jika penasaran untuk Demonya sobat bisa mengunjungi artikel saya berikut : http://goo.gl/vlntrK

Dengan menggunakan responsive ini, maka Vidio Youtube akan selalu menyesuaikan tampilannya dengan device yang sedang mengakses artikel tersebut, jadi ketika melihat vidio youtube pada blog tidak akan terlihat berantakan.
Jquery Embed Youtube Videos With Defer Iframe Responsive
Kenapa sampai saya buatkan dokumentasi, karena cara ini terbilang sangat simple, dan kita tidak perlu mengedit tag dari vidio youtube yang kita masukkan ke blog kita, cukup kita tambahkan dari menu Insert a vidio yang ada pada Entri pada saat sobat membuat artikel.

Memasang Jquery Responsive Youtube Vidios
Seperti biasanya untuk memasang script kita harus menambahkannya pada akhir template atau tepatnya sebelum tag </body> dan tambahkan Script Jquery berikut ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Resposive Youtube Script 
$(document).ready(function() {
    $('iframe[src*="youtube.com"]').wrap('<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%"></div>');
    $('iframe[src*="youtube.com"]').css({
        "position": "absolute",
        "top": "0",
        "left": "0",
        "width": "100%",
        "height": "100%",
        "border": "0"
    });
    $('iframe[src*="youtube.com"]').each(function() {
        $(this).attr("data-src", $(this).attr("src"));
        $(this).attr("src", "")
    });
});

function init() {
    var vidDefer = document.getElementsByTagName('iframe');
    for (var i = 0; i < vidDefer.length; i++) {
        if (vidDefer[i].getAttribute('data-src')) {
            vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
        }
    }
}
window.onload = init;
//]]>
</script>
</b:if>
Script tersebut sudah menggunakan tag kondisional agar hanya terload ketika pada halaman posting aja, jadi di homepage tidak akan bertambah berat. Setelah sobat lakukan cara ini, selanjutnya jangan lupa simpan template.

Jangan Lupa Script Jquery
Karena script ini adalah script Jquery jadi sobat jangan lupa untuk menambahkan script jquernya. Biasanya script tersebut akan terlihat seperti berikut dan bisa diletakkan dimana saja, namun pada umumnya akan diletakkan sebelum kode </head> berikut contoh kode jquery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
Sobat bisa mengoptimalkan penempatan jquery itu dengan mencoba artikel yang pernah saya publish berikut ini : http://goo.gl/3o6zk8

Biasanya setiap template sudah memiliki atau menggunakan script jquery ini, minimal menggunakannya pada posting saja, jadi sebelum sobat menambahkan jquery ini, alangkah baiknya untuk mengecek apakan jquery ditemplate sobat tidak ada ataukan sudah ada. Biar tidak terjadi double jquery. Semoga bermanfaat..
Share this with short URL:
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed