jQuery fancyBox YouTube videos not working

1 Views

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

Read More
$(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.

Post Views: 1

Related posts

Leave a Reply

2 comments 

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

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