CODEWITHSUNDEEP
jqueryruby-on-railsfancybox
Justin
Justin

Reputation: 1956

Fancybox 2 Not Loading in Rails

I have FancyBox installed in my Rails 3.2 app's vendor assets directories (e.g. the jquery.fancybox.pack.js, jquery.fancybox.css, and the associated images in their respective directories within the vendor assets folder, none of the extras).

The javascript and CSS assets are loaded in both the application.js and application.css files in the asset pipeline. And, I've tested and confirmed that they are indeed working, because an image pops up properly when clicked.

The problem is that a YouTube video modal won't load. Instead, it just shows the loading GIF that flickers every second or so.

Here's the jQuery (CoffeeScript) code:

$(document).ready ->
  $(".videopopup").fancybox
    maxWidth: 800
    maxHeight: 600
    fitToView: false
    width: '70%'
    height: '70%'
    autoSize: false
    closeClick: false
    openEffect: 'none'
    closeEffect: 'none'
  return

And here's the link code within the page:

<%= link_to image_tag('thumbnail.png', alt: 'Thumbnail', class: "responsive"), 'http://www.youtube.com/embed/myvideocode?fs=1&autoplay=1', class: 'videopopup', title: 'My Video' %>

I am running this on localhost, which could be the problem. In Chrome, I looked at the console and found the following error:

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

Does anyone know what this error means? I've seen a few SO questions about this error, but no specific solutions on how to get past it in Rails. Or, am I missing something?

Upvotes: 0

Views: 1190

Answers (1)

Janis
Janis

Reputation: 8769

Actually, the error message you have posted is self explaining - ajax requests are not allowed due to security restrictions.

The real question would be - why is the script making an ajax request, as it should create an iframe. Looks like the script can not guess content type and, as JFK has already mentioned, you can help by adding classname "fancybox.iframe".

Upvotes: 1

Related Questions