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.
All you need to do to fix this is: change ‘fancybox.iframe’ to ‘fancybox iframe’ – remove the dot(.), worked for me.
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
andAccess-Control-Allow-Methods
), part of the CORS spec.Using Access-Control-Allow-Origin
Set the
Access-Control-Allow-Origin
header in your response.The above will allow any resource to use the service cross-domain. See How to configure
Access-Control-Allow
. Article on MDN.