Ditulis oleh: Ditulis pada: 10/10/2015
Postingan kali ini merupakan update postingan sebelumnya tentang cara embed Youtube video URL only with Jquery agar penulisannya benar-benar simple hanya cukup dengan menuliskan URL video Youtube saja di dalam postingan baik dalam editor postingan mode HTML maupun Compose.Baca juga: Embed Youtube Video URL Only With Jquery
Dengan update kali ini, kita bisa benar-benar hanya menuliskan URL video Youtube saja di dalam postingan seperti ini: https://www.youtube.com/watch?v=HgFTKuo8i7I
Dan jquery akan otomatis mendeteksi URL video Youtube tersebut dan akan menggantinya menjadi iframe video Youtube. Sebagai demonya silahkan lihat di sini.
Untuk bukti bahwa yang ditulis hanya URL video Youtube saja, kita bisa lihat di page source halaman tersebut seperti di bawah ini.
Untuk membuat seperti itu, silahkan gunakan kode di bawah ini.
Silahkan simpan kode di bawah ini di atas kode
</body>
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");};
var videoEmbed = {
invoke: function(){
$('.post-body').html(function(i, html) {
return videoEmbed.convertMedia(html);
});
},
convertMedia: function(html){
var pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;
if(pattern.test(html)){
var replacement = '<div class="videoyoutube"><div class="video-responsive"><iframe height="281" width="500" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe></div></div>';
var html = html.replace(pattern, replacement);
}
return html;
}
}
setTimeout(function(){
videoEmbed.invoke();
},800);
//]]>
</script>
</b:if>
Perhatikan kode yang saya marking, jika di blog sudah terdapat Jquery Library (berapa pun versinya) silahkan hapus kode tersebut.
Kemudian simpan kode CSS di bawah ini di atas kode
</head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.videoyoutube{
margin:20px auto;
width:100%;
}
.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}
</style>
</b:if>
Kemudian SAVE edit HTML template blog Anda.
Untuk menampilkan video Youtube di postingan, silahkan paste video URL yang di-copy dari address bar video Youtube di editor postingan baik dalam mode HTML ataupun Compose seperti URL berikut sebagai contoh: https://www.youtube.com/watch?v=HgFTKuo8i7I. Dan embed video Youtube ini sudah responsive.
Selamat mencoba.......