Question

How would you go about embedding youtube vidoes automatically from the URI.
Say for example you type in a textbox:

The quick brown fox jumped over this video http://www.youtube.com/watch?v=5qm8PH4xAss&feature=player_embedded and then fell into this http://www.youtube.com/watch?v=lSCSmpV8Nn8&feature=hp_SLN&list=SL

You press submit and the results are displayed back to you. In place of the youtube links you have the actual flash files.

(In php naturally, or any language).

I know you could use Regex (preg_replace .etc), however how would you remove the extra queries that youtube provides (i.e. &feature=blah), and turn everything into something like: http://www.youtube.com/v/5qm8PH4xAss, ready to be placed into an object to embed.

Sorry for the long question,.. I hope you understand it. 🙂

Answer 1

i think you are looking for something like this:
try it here : http://www.jsfiddle.net/feridcelik/qu6U6/2/

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="http://jquery.lukelutman.com/plugins/flash/jquery.flash.js"></script>

<script type="text/javascript">

   var yt="http://www.youtube.com/v/";
   $("a[href^='http://www.youtube.com/watch?v=']").each(function(){

        var key;
        var href =$(this).attr("href");
        var i=href.indexOf("v");
        href=href.substring(i+2,href.length);
        i=href.indexOf("&");
        if(i>-1){
            key=href.substring(0,i);
        }
        href=yt+key;
        $(this).after("<a href='"+href+"' class='video'></a>");

    });

    $('.video').flash(
        { height: 200, width: 200},
        { version: 8 },
        function(htmlOptions) {
            $this = $(this);
            htmlOptions.src = $this.attr('href');
            $this.before($.fn.flash.transform(htmlOptions));                        
        }
    );
    $('.video').remove();

</script>

based on the flash plugin from:
http://jquery.lukelutman.com/plugins/flash/