jQuery FancyBox YouTube视频无效 [英] jQuery FancyBox YouTube videos not working

问题描述

我有一种情况，我不能修改锚标记的HTML代码，但'href'属性除外。因此，无法向锚标记添加类。

I have a situation whereby I cannot modify the HTML code for the anchor tag, with the exception of the 'href' attribute. So adding a class to the anchor tag is not an option.

HTML标记如下：

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

为了区分这个链接和其他链接，我添加了一个基于'href'的选择器jQuery代码。

To distinguish between this and other links, I have added a selector based on the 'href' to the jQuery code.

代码如下：

(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，因此为什么我在顶部添加了部分以启用'$'。

This does not seem to be working at all. Can anyone tell me where I am going wrong? I am using Drupal, hence why I have added the part at the top to enable to '$'.

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

I cannot see any errors in the console, the page simply navigates straight to the YouTube page with no JavaScript intervention.

推荐答案

adding a class to the anchor tag is not an option

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

That is not necessarily true since you can always add the class via jQuery like

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

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

Anyway, personally I don't like to use the swf mode for youtube videos any more but iframe mode; that makes them easier to handle and cross-platform compatible (including iOS)

我要做的是，使用 .each（）方法：

What I would do is, using the .each() method :

• 将每个 href 转换为嵌入格式使用javascript .replace（）


• 将每个锚点绑定到fancybox


• 使用fancybox href API选项设置新转换的 href

• convert every single href to embed format using javascript .replace()
• bind each anchor to fancybox
• set the new converted href using the fancybox href API option

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

This is the code that works for both fancybox v1.3.4 or 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);

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

Notice that I added wmode=opaque, otherwise the close button will be behind the youtube video.

请参阅 JSFIDDLE 版本1.3.4 ...或 JSFIDDLE 与v2.1.4

See JSFIDDLE with version 1.3.4 ... or JSFIDDLE with v2.1.4

这篇关于jQuery FancyBox YouTube视频无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！