JS: Insert youtubelink=youtube info

So ive got this far:

$.get('http://gdata.youtube.com/feeds/api/videos/NWHfY_lvKIQ?v=2&alt=json', function(data) {
        var title = data.entry.title.$t;
        var description = data.entry.media$group.media$description.$t;
     开发者_开发技巧   var thumbnail = data.entry.media$group.media$thumbnail[0].url; // URL of the image

        alert (description);
                alert (title);
                        alert (thumbnail);
        // Use these variables somewhere
});

This script is for one specific video.

Now i want this same thing to happen but that you insert a youtube link and then this happens.

e.g you paste this http://www.youtube.com/watch?v=G7YXn-lfHXc into a normal <input id="youtubebox" type="text"> , then it will give you those three alerts with the description, title and thumbnail for the videolink you've inserted.

So it converts somehow this http://www.youtube.com/watch?v=G7YXn-lfHXc to this G7YXn-lfHXc and then inserts that videolink ID at this line:

$.get('http://gdata.youtube.com/feeds/api/videos/HERE?v=2&alt=json', function(data) {

Or? how can i do this please help me my last needs for my system, thank you.

UPDATED with some more validation to avoid returning errors with invalid data (eg wrong youtube link)

This will take care of it for you.

You could place the event on a button or as is "on blur" of the input field

<input type="text" name="youtube" id="youtube_url" />

<script>
$(document).ready(function(){
    $("#youtube_url").blur(function() {
            var url=$(this).val();
            //get the youtube video id
            regx = new RegExp("http://(www.)?youtube.com/(.*)v=([a-zA-Z0-9\-]+)");
            var ytID = regx.exec(url);

            if(ytID!=null && ytID[3]!="") {
                $.get('http://gdata.youtube.com/feeds/api/videos/'+ytID[3]+'?v=2&alt=json', function(data) {
                        if(data.entry != null) {                                                                         
                            var title = data.entry.title.$t;
                            var description = data.entry.media$group.media$description.$t;
                            var thumbnail = data.entry.media$group.media$thumbnail[0].url; // URL of the image

                            alert (description);
                            alert (title);
                            alert (thumbnail);
                        // Use these variables somewhere
                        }
                });
            }
    });                        
});
</script>