Jquery Embed Youtube Videos With Defer Iframe Responsive

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

0 Response to "Jquery Embed Youtube Videos With Defer Iframe Responsive"

Post a Comment

Silahkan berkomentar sesuai topik pada Artikel ini, komentar akan saya balas ketika saya sedang tidak ada kesibukan lainnya.

Note : Jangan lupa untuk mengaktifikan centang Notify me pada kolom komentar, agar kamu mendapat notifikasi balasan dari saya langsung Via Email. Tks

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel