JS: Insert youtubelink=youtube info

Question

Hello. 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.

Answer 1

This may help you -> http://www.netlobo.com/url_query_string_javascript.html And then replace the "window.location.href" with the youtube URL that is pasted into the text input.

Answer 2

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&amp;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>