Ditulis oleh: Ditulis pada: 10/30/2014
Embed Youtube Video URL Only With Jquery - Let's talk less do more! Begitulah kira-kira hehehe... Dengan jquery kita bisa memasang video Youtube hanya dengan menuliskan URL videonya saja di postingan HTML.
Dengan begitu kita bisa menghemat tenaga untuk membuat postingan yang menyertakan video di dalamnya.
Untuk memasang video Youtube di postingan ini, kita menggunakan CSS style video Youtube responsive yang sudah saya posting sebelumnya agar ramah dengan berbagai device yang digunakan termasuk mobile atau handphone.
Yang pertama dilakukan yaitu mencatat url videonya dari address bar browser yang membuka halaman video Youtube-nya seperti pada gambar di bawah ini. Sebagai contoh saya ambil video "Sakitnya Tuh Di sini" mumpung lagi booming hehehe....
http://www.youtube.com/watch?v=yLeQAS5xSAg
Gunakan CSS style video Youtube responsive di bawah ini. Jika sebelumnya Anda sudah pernah memasangnya, maka langkahi step ini.
.videoyoutube{
text-align: center;
background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);
border:1px solid #A8A8A8;
border-radius:5px;
margin:20px auto;
width:80%;
box-shadow: 1px 30px 30px -26px #818181;
}
.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin:8px;
}
.video-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}
Kemudian simpan jquery di bawah ini di atas kode
</body>
<script type='text/javascript'>
var videoEmbed = {
invoke: function(){
$('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 = '<iframe height="281" width="500" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
var html = html.replace(pattern, replacement);
}
return html;
}
}
setTimeout(function(){
videoEmbed.invoke();
},800);
</script>
Kemudian untuk memasang video Youtube di postingan silahkan gunakan kode di bawah ini.
<div class="videoyoutube">
<div class="video-responsive">
URL VIDEO YOUTUBE DI SINI
</div>
</div>
Jadi jika menggunakan URL video pada contoh di atas tadi, maka kodenya menjadi seperti berikut ini.
<div class="videoyoutube">
<div class="video-responsive">
https://www.youtube.com/watch?v=yLeQAS5xSAg
</div>
</div>
Bagi yang tidak ingin menggunakan video responsive, maka penulisannya semakin simple yaitu hanya menggunakan kode jquery-nya saja dan untuk memasangkan video di postingannya hanya menggunakan URL videonya saja tanpa
div seperti di atas pada mode postingan HTML. Dan jangan lupa, pastikan pada template Anda sudah terpasang jquery library berapa pun versinya.Baca juga: Update: Embed Youtube Video With URL Only