JavaScript
Article

jQuery Replace YouTube Links with Flash Video

By Sam Deering

jquery-flash-youtube

jQuery code snippet to replace all youtube.com links with embed flash video on web page or blog post/page.

Instructions

Go to youtube.com, find the video (for example http://www.youtube.com/watch?v=zzk-8akrWxo), copy link and paste it in your page/blog post. Change in script width and height to your desired parameters and change ‘#blog .post’ to your page content container or blog post container.

$(function(){
    var vidWidth  = 459; // youtbe video width
    var vidHeight = 283; // youtube video height
    var obj       = '' +
        '' +
        '' +
        '';

    $('#blog .post').find('p:contains("youtube.com/watch")').each(function(){
        var that = $(this);
        var vid = that.html().match(/(?:v=)([w-]+)/g);
        if (vid.length) {
            $.each(vid, function(i){
                that.replaceWith( obj.replace(/[vid]/g, this.replace('v=','')) );
            });
        }
    });
});

Source
See live demo

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.