Sulap url youtube, vimeo menjadi video

Kadang kita tidak ingin ribet dalam hal mengambil video diyoutube untuk disematkan diblog kita. Dengan menggunakan javascript dibawah ini kita akan lebih mudah menyematkan atau memposting video dari youtube maupun dari vimeo. Anda cukup mempaste URL video youtube atau vimeo pada editor postingan anda dan tanpa repot maka URL youtube atau vimeo tadi akan menjadi sebuah video.

Cara Penyimpanan Kode

1. Pastikan template anda sudah mempunyai framework Jquery kalau belum pasang kode dibawah ini diatas </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

2. Simpan kode Javascriptnya dibawah ini, dibawah Framework Jquery tadi.

<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
var videoEmbed = {
    invoke: function(){
        $('body').html(function(i, html) {
            return videoEmbed.convertMedia(html);
        });
    },
    convertMedia: function(html){
        var pattern1 = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/g;
        var pattern2 = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;
        
        if(pattern1.test(html)){
           var replacement = '<iframe width="420" height="345" src="//player.vimeo.com/video/$1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
           var html = html.replace(pattern1, replacement);
        }
        if(pattern2.test(html)){
              var replacement = '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
              var html = html.replace(pattern2, replacement);
        } 
        return html;
    }
}
videoEmbed.invoke();
});//]]> 

</script>

Contoh Penerapan kode

Contoh penerapannya seperti kode dibawah ini, perhatikan baik2.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
var videoEmbed = {
    invoke: function(){
        $('body').html(function(i, html) {
            return videoEmbed.convertMedia(html);
        });
    },
    convertMedia: function(html){
        var pattern1 = /(?:http?s?:\/\/)?(?:www\.)?(?:vimeo\.com)\/?(.+)/g;
        var pattern2 = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;
        
        if(pattern1.test(html)){
           var replacement = '<iframe width="420" height="345" src="//player.vimeo.com/video/$1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
           var html = html.replace(pattern1, replacement);
        }
        if(pattern2.test(html)){
              var replacement = '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
              var html = html.replace(pattern2, replacement);
        } 
        return html;
    }
}
videoEmbed.invoke();
});//]]> 

</script>

Dan yang seperti saya katakan diatas, jika ingin menampilkan video pada postingan anda, cukup dengan Paste URL aja misalnya seperti ini.

https://www.youtube.com/watch?v=ufOo7nSuw3Y

Breng-breng jadilah video....

CONTOH

Referensi : Stackoverflow