0

我希望从 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>

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

4

2 回答 2

2

尝试

$(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
于 2012-08-20T08:08:09.313 回答
0

这就是为我解决的问题：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 中对其进行了测试，它可以正常工作。

于 2012-09-21T16:54:11.333 回答