Embed Youtube Video with URL Only

Embed Video Youtube hanya dengan URL

Postingan kali ini merupakan cara embed Youtube video URL only with Jquery / cara posting video youtube hanya dengan alamat urlnya saja, agar penulisannya benar-benar simple hanya cukup dengan menuliskan URL video Youtube saja di dalam postingan baik dalam editor postingan mode HTML maupun Compose.

Dengan cara 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.

View Page Source

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.