Rails 3.2アプリのベンダーアセットディレクトリにFancyBoxをインストールしています(たとえば、jquery.fancybox.pack.js、jquery.fancybox.css、およびベンダーアセットフォルダー内のそれぞれのディレクトリにある関連イメージ、追加機能はありません)。
javascriptとCSSアセットは、アセットパイプラインのapplication.jsファイルとapplication.cssファイルの両方に読み込まれます。また、クリックすると画像が正しくポップアップするため、実際に機能していることをテストして確認しました。
問題は、YouTubeビデオモーダルがロードされないことです。代わりに、1秒ごとにちらつく読み込み中のGIFが表示されます。
jQuery(CoffeeScript)コードは次のとおりです。
$(document).ready ->
$(".videopopup").fancybox
maxWidth: 800
maxHeight: 600
fitToView: false
width: '70%'
height: '70%'
autoSize: false
closeClick: false
openEffect: 'none'
closeEffect: 'none'
return
そして、これがページ内のリンクコードです:
<%= 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' %>
これをローカルホストで実行していますが、これが問題になる可能性があります。Chromeでコンソールを調べたところ、次のエラーが見つかりました。
XMLHttpRequestはhttp://www.youtube.com/embed/myvideocode?fs=1&autoplay=1を読み込めません。Origin
http://localhost:3000
はAccess-Control-Allow-Originで許可されていません
このエラーの意味を誰かが知っていますか?このエラーについていくつかのSOの質問を見てきましたが、Railsでそれを乗り越える方法に関する具体的な解決策はありません。または、私は何かが欠けていますか?