The reason for this issue is that Internet Explorer (up to IE 10) does not have support for Cross-Domain Resource Sharing.
When a request is made using browsers like Firefox, Safari, Chrome, and Opera, the browser initially sends an OPTIONS
request to the server to check for Access-Control-Allow-Origin
in the headers. This header informs the browser about which external sites are permitted to make requests to this domain.
The headers provided by the gdata API include:
HTTP/1.1 200 OK
X-GData-User-Country: US
Content-Type: application/json; charset=UTF-8
Access-Control-Allow-Origin: *
Expires: Tue, 15 Jan 2013 15:02:28 GMT
Date: Tue, 15 Jan 2013 15:02:28 GMT
Cache-Control: private, max-age=300, no-transform
Vary: *
GData-Version: 2.1
ETag: W/"C0EGQn47eCp7I2A9WhNbEks."
Last-Modified: Tue, 15 Jan 2013 14:53:43 GMT
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Server: GSE
The presence of Access-Control-Allow-Origin: *
indicates that any external page is allowed to access the current page regardless of protocol, host, or port differences.
However, Internet Explorer fails to handle this standard properly.
To work around this limitation, you can utilize the JSONP standard, which is supported by the gdata API.
To implement this, adjust your $.getJSON
call by adding a ?
at the end of the URL. This signals to jQuery that JSONP should be used for the request, enabling communication with external sites.
For example:
var youtube_id = url.replace(/^[^v]+v.(.{11}).*/,"$1");
$.getJSON('http://gdata.youtube.com/feeds/api/videos/'+youtube_id+'?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;
var imgdata = "<img src ='"+thumbnail+"' />";
alert(title);
});