Embed youtube videos using oembed

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

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

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);
        }
    });

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.

来源：https://stackoverflow.com/questions/7124118/embed-youtube-videos-using-oembed

标签

javascript

jquery

json

youtube

oembed