Ditulis oleh: Ditulis pada: 5/29/2016
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.