Memasang Embed Video Youtube Responsive Di Blog

Cara mengembed video youtube di blog memang sangat mudah dan gampang banget. Nah kali ini mimin akan memberikan tutorial blogger bagaimana cara membuat dan memasang Jquery responsive embed youtube pada blog dimana fitur jquery ini akan dilengkapi dengan defer iframe agar tidak membebani loading atau kecepatan akses blog anda.

Jika anda sebelumnya telah mengupload video youtube pada artikel blog dengan cara mengembed video youtube ke dalam blog maka apabila anda menerapkan jQuery ini akan secara otomatis membuat video youtube dalam postingan blog anda akan berubah secara otomatis menjadi responsive dan mendefer semua video youtube yang telah di embed ke artikel blog dan menjadi lebih fast loading.

Nah biasanya kode video youtube akan terlihat seperti di bawah ini.

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

Setelah anda menggunakan jQuery ini maka akan secara otomatis kode tersebut berganti seperti kode berikut ini.

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%">
     <iframe width="560" height="315" src="https://www.youtube.com/embed/fk4BbF7B29w" frameborder="0" allowfullscreen="" data-src="https://www.youtube.com/embed/fk4BbF7B29w" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;"></iframe>
</div>

Nah apabila anda menggunakan jQuery embed ini maka dengan begitu semua video youtube yang telah anda embed sebelumnya akan menjadi lebih responsive dan fast loading. Tentunya juga tidak akan membuat blog anda terbebani.

Cara Memasang Embed Video Di Youtube Responsive Pada Blog Terbaru 2016

1. Langkah pertama login ke dashboard blogger kemudian ke menu Template > Edit HTML.

2. Tambahkan kode berikut ini tepat di atas kode </body>

<script>
//<![CDATA[
$(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>

4. Simpan kembali template anda. Dan lihat hasilnya

Semoga bermanfaat.