I want to use oembed to get the embed code from youtube links with jQuery:

var url = "";
url = encodeURIComponent(url);

$.getJSON('='+url+'&format=json', function(data) {
console.log(data);
});

Well I don't get any data.

Funny thing is, that if I browse to the url I get the right response:

.youtube%2Fwatch%3Fv%3DiwGFalTRHDA&format=json` 

leads me to

{
provider_url: "/"
title: "Trololo"
html: "<object width="425" height="344"><param name="movie" value=""></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="" type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"></embed></object>"
author_name: "KamoKatt"
height: 344
thumbnail_width: 480
width: 425
version: "1.0"
author_url: ""
provider_name: "YouTube"
thumbnail_url: ".jpg"
type: "video"
thumbnail_height: 360
}

I also used the jquery oembed plugin, but the onError option is always thrown, also if the request was successful.

I'm really looking forward for some ideas...

I want to use oembed to get the embed code from youtube links with jQuery:

var url = "http://www.youtube.com/watch?v=iwGFalTRHDA";
url = encodeURIComponent(url);

$.getJSON('http://youtube.com/oembed?url='+url+'&format=json', function(data) {
console.log(data);
});

Well I don't get any data.

Funny thing is, that if I browse to the url I get the right response:

http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DiwGFalTRHDA&format=json` 

leads me to

{
provider_url: "http://www.youtube.com/"
title: "Trololo"
html: "<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/iwGFalTRHDA?version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/iwGFalTRHDA?version=3" type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"></embed></object>"
author_name: "KamoKatt"
height: 344
thumbnail_width: 480
width: 425
version: "1.0"
author_url: "http://www.youtube.com/user/KamoKatt"
provider_name: "YouTube"
thumbnail_url: "http://i2.ytimg.com/vi/iwGFalTRHDA/hqdefault.jpg"
type: "video"
thumbnail_height: 360
}

I also used the jquery oembed plugin, but the onError option is always thrown, also if the request was successful.

I'm really looking forward for some ideas...

• javascript
• jquery
• json
• youtube
• oembed

5 Answers 5

Actually the problem is you're violating the browser same origin policy with a cross domain ajax request. There a few work potential work arounds -- unfortunately the best JSONP, isn't implemented by YouTube. The next best is using Flash for transport. This is used by YUI-IO utility. Also you can see Jquery suggestions here.

I get the json data just fine if I embed the raw trololo url in the oembed url. I'm guessing that by typing in the encoded version into the address bar does a layer of decoding anyways, so try just sending the raw one:

http://youtube.com/oembed?url=http://www.youtube.com/watch?v=iwGFalTRHDA&format=json

I had a similar problem, turns out that the url query string parameter was using the www.youtube.com domain, whereas my call to the oembed endpoint was using youtube.com/oembed. Using www.youtube.com/oembed fixed the problem.

Got the same problem. I have "solved" this by having a url in my server download the JSON and then send it the client.

Use the json-c version: https://developers.google.com/youtube/2.0/developers_guide_jsonc

    var id = "iwGFalTRHDA";
    $.ajax({
        url: "https://gdata.youtube.com/feeds/api/videos/" + id + "?v=2&alt=jsonc",
        dataType: "jsonp",
        success: function (data) {
            console.log(data);
        }
    });