Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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.

share|improve this question
    
Try <?php header('Access-Control-Allow-Origin: *'); ?> in your file – Manish Oct 19 '13 at 6:58
    
Your code works perfectly fine 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 7:46
    
@Manish i have tried this header("Access-Control-Allow-Origin: *"); but not working. – Rajnikanth Oct 22 '13 at 5:29
<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.

share|improve this answer
    
I can't believe they would do this the wrong way in the docs. – Ogier Schelvis Nov 4 '14 at 13:13

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.

share|improve this answer
    
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 5:43
    
Have a Look stackoverflow.com/questions/3828982/… – 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 5: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 6:23

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.