Question

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

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干预。

Answer 1

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

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);

jQuery FancyBox YouTube视频无效

2 个答案: