jQuery FancyBox YouTube视频不起作用

Question

我有一种情况，我无法修改锚定标记的HTML代码，但“href”属性除外。因此，向锚标记添加一个类不是一个选项。

的HTML标记如下：

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

向该等环节之间进行区分，我已经添加基于“href”属性的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，因此为什么我在顶部添加了该部分以启用'$'。

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

Answer 1

adding a class to the anchor tag is not an option 

，既然你可以随时通过jQuery添加类像

不一定是真实的

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

无论如何，我个人不喜欢使用swf模式作为youtube视频，但iframe模式;这使得它们更容易处理和跨平台兼容（包括iOS）

我会做的是，用.each()方法：

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

这是两个的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 + "&wmode=opaque" 
     }); // fancybox 
    }); // each 
    }); // ready 
})(jQuery); 

Notice我添加wmode=opaque，否则关闭按钮将成为YouTube视频的后面。

见JSFIDDLE与1.3.4版本...或者JSFIDDLE与v2.1.4

Answer 2

你已经错过了瓶盖内的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);