带有 Youtube API 请求的 Fancybox答案

【问题标题】：Fancybox with Youtube API request带有 Youtube API 请求的 Fancybox
【发布时间】：2012-08-19 23:20:56
【问题描述】：

我希望从 youtube API 中提取的视频列表在花式框中打开。但是现在，当您单击图像时，它只会重定向到 youtube 站点。

这里是相关代码。 html.erb

<% @youtube_news.each do |item| %>
        <li>
          <% you_tube_presenter_for(item) do |presenter| %>
              <span class="center videos">
               <%= link_to image_tag(presenter.thumbnail_url), presenter.video_url, :class=> "fancyboxv"  %>
              </span>
              <%= presenter.title %>
              <span class="timestamp">
               Posted <%= time_ago_in_words(presenter.published_date) %> ago
              </span>                                     
          <% end %>
        </li>
    <% end %>

和JS在同一个页面-

<script>
$(document).ready(function(){
 $("a.fancyboxv").fancybox({
    'transitionIn'   : 'none',
    'transitionOut'  : 'elastic',
    'width'          : '640',
    'height'         : '480',
    'href'           : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
      'type'         : 'swf'
      'swf'          :{
             'wmode'          :'transparent',
             'allowfullscreen':'true'
      }
    });

 return false;
});
</script>

我在这里缺少什么？提前感谢您对此的帮助。

【问题讨论】：

标签： ruby-on-rails youtube fancybox

【解决方案1】：

试试

$(document).ready(function(){
 $("a.fancyboxv").click(function() {
  $.fancybox({
   'transitionIn'   : 'none',
   'transitionOut'  : 'elastic',
   'width'          : '640',
   'height'         : '480',
   'href'           : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
   'type'           : 'swf',
   'swf'            : {
     'wmode'           : 'transparent',
     'allowfullscreen' : 'true'
    }
  }); // fancybox
  return false;
 }); // click
}); //  ready

【讨论】：

hmm 不幸的是，这不起作用。它把我送到了同一个标签中的 youtube 网站。我将进一步深入研究 fancybox 文档。 [更新] 在我重新启动服务器后，这非常有效。非常感谢您对这个 JFK 的帮助。

【解决方案2】：

这就是为我解决的问题：https://stackoverflow.com/a/10882262/470749

$(".youtube").click(function() {
            var destination = $(this).attr('href').replace(new RegExp('youtu.be', 'i'), 'www.youtube.com/embed').replace(new RegExp('watch\\?v=([a-z0-9\_\-]+)(&|\\?)?(.*)', 'i'), 'embed/$1?version=3&$3');
            $.fancybox({
                'padding'       : 0,
                'autoScale'     : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'none',
                'title'         : $(this).attr('title'),
                'width'         : 680,
                'height'        : 495,
                'href'          : destination,
                'type'          : 'iframe'
            });
            return false;
        });

HTML： <a class="youtube" href="//www.youtube.com/watch?v=XXXXXX&html5=1&autoplay=1#t=3s" target="_blank">link label</a>

我的目标是让链接的 Youtube 视频弹出一个 Fancybox，即使没有安装 Flash，它也会自动开始播放视频并在 IE/Chrome/Firefox/Safari 中运行。我刚刚在禁用 Flash 的 IE9 中对其进行了测试，并且可以正常工作。

【讨论】：