Jquery Responsive Embed Youtube Videos With Defer Iframe

Satu lagi saya posting tentang video Youtube. 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/fk4BbF7B29w" frameborder="0" allowfullscreen></iframe>


Setelah menggunakan Jquery ini maka otomatis akan menjadi seperti 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 jquery untuk otomatis merubah embed video youtube menjadi responsive dengan defer iframe seperti di bawah ini, silahkan simpan jquery ini 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>


Demo Jquery responsive embed Youtube videos with defer iframe:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Responsive Embed Videos</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
body {
padding-bottom: 60px;
}
</style>
  </head>
  <body>
    <h1 class="text-center"><strong>Jquery responsive embed Youtube videos</strong></h1>
    <h2 class="text-center">With defer iframe</h2>
        <div class="container">
        <div class="row">
          <h3><a class="btn btn-default btn-sm" href="" title="Back to article">Back to article</a></h3>
          </div>
          </div>
    <hr>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

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

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

                <hr>

                <iframe width="560" height="315" src="https://www.youtube.com/embed/YQHsXMglC9A" frameborder="0" allowfullscreen></iframe>
               
            </div>
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>
  </body>
</html>



Silahkan coba resize browser Anda untuk melihat responsive videonya.

You Might Also Like:

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 Hide Parser
Disqus Comments