Skip to content
Advertisement

Javascript – convert youtube/vimeo url’s into embed versions for use on a forum comment feature

enter image description here

Trying to make something similar to facebook. I’ve created this javascript url pattern converter. Something like this could be triggered just as the user clicks on the submit button for a forum post – convert url’s into embed html variants. Any ways to improve this?

http://jsfiddle.net/88Ms2/377/

var videoEmbed = {
    invoke: function(){

        $('body').html(function(i, html) {
            return videoEmbed.convertVideo(html);
        });

    },
    convertVideo: 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)){
            console.log("html", 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)){
              console.log("html", 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;
    }
}






setTimeout(function(){
    videoEmbed.invoke();
},3000);

Advertisement

Answer

LATEST CODE ******** http://jsfiddle.net/88Ms2/378/

This mimics the facebook post feature – of turning a youtube, vimeo or image into a media based link. This will be useful in taking on

Interested in having the code enhanced.

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;
        var pattern3 = /([-a-zA-Z0-9@:%_+.~#?&//=]{2,256}.[a-z]{2,4}b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?(?:jpg|jpeg|gif|png))/gi;

        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);
        } 


        if(pattern3.test(html)){
            var replacement = '<a href="$1" target="_blank"><img class="sml" src="$1" /></a><br />';
            var html = html.replace(pattern3, replacement);
        }          
        return html;
    }
}
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement