Embed Video Youtube Responsive dengan Defer IFrame

Youtube

Tutorial Webmaster, Blogger

Kali ini tentang cara membuat embed video Youtube menjadi responsive dengan Jquery dan dilengkapi dengan defer iframe agar tidak membebani loading blog.

Jika blog Anda sudah banyak memposting video Youtube dengan menggunakan kode embed video Youtube, maka dengan jquery ini semua video akan otomatis menjadi responsive dan pemuatan iframe-nya akan di-defer atau ditunda pemuatannya sampai semua elemen blog termuat.

Biasanya embed video Youtube akan tampak seperti di bawah ini (Youtube > Share > Embed).


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


Cara kerja Script ini sangat sederhana, saat anda menerapkan pada Blog, maka setiap anda menambahkan Video Youtube ke dalam Postingan dengan URL Embednya, maka akan otomatis dirubah menjadi Responsive.

Penerapan Script Sebelum </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>

0 komentar

Posting Komentar