jQuery FancyBox YouTube视频无效

时间:2013-03-31 15:55:12

标签: javascript jquery youtube fancybox fancybox-2

我有一种情况,即我不能修改锚标记的HTML代码,除了' href'属性。因此,无法在锚标记中添加类。

HTML标记如下:

<a href="http://www.youtube.com/watch?v=#########&amp;autoplay=1"></a>

为了区分这个链接和其他链接,我添加了一个基于&#; href&#39;的选择器。到jQuery代码。

代码如下:

(function ($) { 

  $('a[href*="youtube"]').fancybox({
            'padding' : 0,
            'type' : 'swf',
            'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' }
            });
e.preventDefault();

})(jQuery);

这似乎根本不起作用。谁能告诉我哪里出错了?我正在使用Drupal,因此为什么我在顶部添加了部分以启用&#39; $&#39;。

我在控制台中看不到任何错误,该页面只是直接导航到YouTube页面而无需JavaScript干预。

2 个答案:

答案 0 :(得分:2)

adding a class to the anchor tag is not an option

这不一定是真的,因为您总是可以通过jQuery添加类,如

$('a[href*="youtube"]').addClass("fancybox")

无论如何,除了swf模式之外,我个人不想再使用iframe模式播放YouTube视频。这使它们更容易处理和跨平台兼容(包括iOS)

我要做的是,使用.each()方法:

  • 使用javascript href
  • 将每个embed格式转换为.replace()格式
  • 将每个锚点绑定到fancybox
  • 使用fancybox href API选项
  • 设置新转换的href

这是适用于fancybox v1.3.4或v2.x的代码:

(function ($) {
  $(document).ready(function(){
    $('a[href*=youtube]').each(function () {
        // convert youtube swf href to embed for iframe
        var thisHref =  this.href
                       .replace(new RegExp("watch\\?v=", "i"), 'embed/')
                       .replace(new RegExp("&", "i"), '?');
        // bind fancybox to each anchor
        $(this).fancybox({
            "padding" : 0,
            "type" : "iframe",
            // add trailing parameters to href (wmode)
            "href" : thisHref + "&amp;wmode=opaque"
        }); // fancybox
    }); // each
  }); // ready
})(jQuery);

注意我添加了wmode=opaque,否则关闭按钮将位于youtube视频的后面。

使用版本1.3.4查看 JSFIDDLE ...或使用v2.1.4 JSFIDDLE

答案 1 :(得分:0)

您错过了闭包内的doc ready处理程序,并且不需要e.preventDefault()

(function ($) { 
   $(function(){
     $('a[href*="youtube"]').fancybox({
        'padding' : 0,
        'type' : 'swf',
        'href' : this.href.replace(/watch?v=/gi, 'v/'),
        'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' }
     });    
  });
})(jQuery);