Get YouTube video JSON Data using JQuery and Ajax

Earlier I’ve written an article on how t get Youtube data using JSON and it was a blast, but i had a litlle cosmetic drawback. You had to put script tags in your markup.   It works but it’s not pretty (c: . One of the easiest ways to load JSON data onto our website is to use the $.ajax(), which is a very useful JQuery method.  Her’s my way of doing it.

      $.ajax({
            type: "GET",
            url: "http://gdata.youtube.com/feeds/users/[USERNAME]/uploads?alt=json-in-script&format=5",//generateJSonPlayListCallBackUrl(),
            cache: false,
            dataType:'jsonp',
            success: function(data){
                showMyVideos(data);
          }
        });

I’ve taken the showMyVideos() from Google’s Json documentation article it’ will display a list of video titles from a given Youtube  users Chanel.  To use this code snippet just replace [USERNAME] with a Youtube user name, and put inside a JS file (c: Take notice of dataType:’jsonp’, thats the important bit. This allows us to retrieve youtube data back to our domain (c:

well thats it for to day,.. stay frosty people,..

Advertisements

6 Responses to Get YouTube video JSON Data using JQuery and Ajax

  1. greg says:

    Hello, I love this code, but question please. I do not know jQuery. Do you know how to do it with Dojo. I keep getting a 405 error

    thanks

    • maanehunden says:

      thankz,.. (c: glad you like it,.. I’ve not played with Dojo jet .. )c: but if i can take a look at your code,.. parhaps i can spot an error.

      • greg says:

        Thanks, This is what I have. Both dont work. Same error.. a 405.

        function goget() {
        dojo.xhrGet( {
        url: “http://gdata.youtube.com/feeds/api/videos/21OH0wlkfbc?v=2&alt=json-in-script&callback=youtubeFetchDataCallback”,
        timeout: 4000,
        handleAs: “json”,
        load: function(response, ioArgs) {
        alert(‘worked’);
        return response;
        },
        error: function(response, ioArgs) {
        alert(response.toString());
        console.log(response, ioArgs);
        return response;
        },
        });
        }

        function gopost() {
        dojo.xhrPost({
        url: “http://gdata.youtube.com/feeds/api/videos/21OH0wlkfbc”,
        timeout: 4000,
        handleAs: “jsonc”,
        load: function(response, ioArgs) {
        alert(‘worked’);
        return response;
        },
        error: function(response, ioArgs) {
        alert(response.toString());
        console.log(response, ioArgs);
        return response;
        },
        content: {
        v: ‘2’,
        alt: ‘json-in-script’,
        callback: ‘youtubeFeedCallback’,
        },
        });
        }

  2. Pikos says:

    Hello, I love this code, but question please. I do not know jQuery. Do you know how to do it with Dojo. I keep getting a 405 error

  3. purewebdev says:

    I did a slightly different implementation of the youtube json api http://genesisfont.com/jsonvid/ , still working on it

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: