1

I am using WordPress and using jQuery fancyBox for display YouTube videos but I am getting this error:

XMLHttpRequest cannot load http://www.youtube.com/embed/L9szn1QQfas?autoplay=1. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

I have added bellow jQuery code in footer.php

$(document).ready(function() {
    $(".fancybox").fancybox();
});

and added bellow html code inside my post.

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">
    <img class="alignleft size-thumbnail wp-image-583" alt="small-screen-youtube" src="http://localhost/example/wp-content/uploads/2013/10/small-screen-youtube-150x150.png" width="150" height="150" />
</a>

This problem is killing me :(

Any ideas or suggestions? Thanks.

Rajnikanth
  • 2,745
  • 6
  • 31
  • 46
  • Try in your file – Manish Oct 19 '13 at 06:58
  • Your code works perfectly fine http://jsfiddle.net/zMQXt/ but as it was already mentioned, you should test in a server environment. Additionally, in WordPress, you should try using `jQuery` instead of the `$` alias. – JFK Oct 19 '13 at 07:46
  • @Manish i have tried this `header("Access-Control-Allow-Origin: *");` but not working. – Rajnikanth Oct 22 '13 at 05:29

2 Answers2

9
<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">
<img class="alignleft size-thumbnail wp-image-583" alt="small-screen-youtube" src="http://localhost/example/wp-content/uploads/2013/10/small-screen-youtube-150x150.png" width="150" height="150" />
</a>

All you need to do to fix this is: change 'fancybox.iframe' to 'fancybox iframe' - remove the dot(.), worked for me.

denwo
  • 91
  • 4
0

The request to the service is failing because of browser same origin policy. Your local server is at http://localhost while you are trying to access a resource at http://www.youtube.com/. These are both at different domains. So it won't work.

A way to deal with this is to use JSONP or CORS headers (Use the Access-Control-Allow-Origin and Access-Control-Allow-Methods), part of the CORS spec.

Using Access-Control-Allow-Origin

Set the Access-Control-Allow-Origin header in your response.

Access-Control-Allow-Origin: *

The above will allow any resource to use the service cross-domain. See How to configure Access-Control-Allow. Article on MDN.

Jenson M John
  • 5,499
  • 5
  • 30
  • 46
  • Hi thanks for the reply. I have added this code `header("Access-Control-Allow-Origin: *");` in my header.php in live site but still not working. – Rajnikanth Oct 22 '13 at 05:43
  • Have a Look http://stackoverflow.com/questions/3828982/xmlhttprequest-cannot-load-an-url-with-jquery – Jenson M John Oct 22 '13 at 10:33
  • 1
    Hi Jenson! My problem is solved by using WordPress plugin. `http://wordpress.org/plugins/easy-fancybox/`. – Rajnikanth Oct 23 '13 at 05:12
  • @Rajnikanth Good. You Can post that as answer how you resolved your problem..That'll help others who experience same kinda issues. Thanks..:) – Jenson M John Oct 23 '13 at 06:23