在 Fancybox jQuery 中打开 YouTube 视频

Posted 2023-02-24

【中文标题】在 Fancybox jQuery 中打开 YouTube 视频

【英文标题】：Open YouTube video in Fancybox jQuery

【发布时间】：2011-02-02 06:58:13

【问题描述】：

我可以在 Fancybox 中打开 YouTube 视频吗？

我有一个 YouTube 视频链接列表，例如：

<a href="http://www.youtube.com/watch?v=PvbqV8W96D0" class="more">Play</a>

和 Fancybox ：

$("a.more").fancybox(
                    'titleShow'     : false,
                    'transitionIn'  : 'elastic',
                    'transitionOut' : 'elastic'
        );

我不想为每个视频创建新的嵌入对象。

是否有一些插件或其他方式来做到这一点？

【参考方案1】：

我开始使用此处的答案，但将其修改为使用 YouTube 的新 iframe 嵌入...

$('a.more').on('click', function(event) 
    event.preventDefault();
    $.fancybox(
        'type' : 'iframe',
        // hide the related video suggestions and autoplay the video
        'href' : this.href.replace(new RegExp('watch\\?v=', 'i'), 'embed/') + '?rel=0&autoplay=1',
        'overlayShow' : true,
        'centerOnScroll' : true,
        'speedIn' : 100,
        'speedOut' : 50,
        'width' : 640,
        'height' : 480
    );
);

【讨论】：

我发现这种方法更好，因为 swf 版本在 iPhone 上显示正确尺寸时存在问题——它们都有同样的问题，即 fancybox 太高，但 iFrame 版本用视频填充高度，但 swf 将其缩小。

【参考方案2】：

这有一个正则表达式，因此只需复制和粘贴 youtube 网址就更容易了。非常适合为客户使用 CMS。

/*fancybox yt video*/
$(".fancybox-video").click(function() 
    $.fancybox(

    padding: 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'         : 795,
        'height'        : 447,
        'href'          : this.href.replace(new RegExp("watch.*v=","i"), "v/"),
        'type'          : 'swf',
        'swf'           : 
        'wmode'             : 'transparent',
        'allowfullscreen'   : 'true'
         

    );
    return false;
);

【参考方案3】：

这已损坏，请参阅编辑

<script type="text/javascript">
$("a.more").fancybox(
                    'titleShow'     : false,
                    'transitionIn'  : 'elastic',
                    'transitionOut' : 'elastic',
            'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'      : 'swf',
            'swf'       : 'wmode':'transparent','allowfullscreen':'true'
        );
</script>

这样，如果用户 javascript 被启用，它会打开一个带有 youtube 嵌入视频的幻想框，如果 javascript 被禁用，它会打开视频的 youtube 页面。如果你愿意，你可以添加

target="_blank"

对于您的每个链接，它不会在大多数文档类型上验证，但如果fancybox 没有选择它，它将在新窗口中打开链接。

编辑

上面的this 引用不正确，因此代码在this 下找不到href。你必须这样称呼它：

$("a.more").click(function() 
    $.fancybox(
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'     : 680,
            'height'        : 495,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : 
                 'wmode'        : 'transparent',
                'allowfullscreen'   : 'true'
            
        );

    return false;
);

如http://fancybox.net/blog #4 所述，在上面复制

【讨论】：

这里的this 引用不是a 元素。因此，this.href 未定义。

@jsumners: 确实不行……this.href 没有定义……它不是你定义的监听器。

这个版本不能逐字运行的原因是你首先错过了点击事件。博客上的示例将 fancybox 调用包裹在 click 调用中，这就是为什么在引用“this”时会获得锚点。

我必须将event.preventDefault(); 代码添加到我的函数中才能使其工作。

【参考方案4】：

谢谢，亚历山大！

要在 youtube 的 flash 内容上方设置花式关闭按钮，请将“wmode”添加到“swf”参数：

'swf': 'allowfullscreen':'true', 'wmode':'transparent'

【讨论】：

这似乎没有什么不同

【参考方案5】：

如果你想添加自动播放功能。简单替换

this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 

与

this.href = this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '&autoplay=1',

你也可以用 vimeo 做同样的事情

this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1'),

与

this.href = this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1') + '&autoplay=1',

【参考方案6】：

$("a.more").click(function() 
                 $.fancybox(
                  'padding'             : 0,
                  'autoScale'   : false,
                  'transitionIn'        : 'none',
                  'transitionOut'       : 'none',
                  'title'               : this.title,
                  'width'               : 680,
                  'height'              : 495,
                  'href'                : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                  'type'                : 'swf',    // <--add a comma here
                  'swf'                 : 'allowfullscreen':'true' // <-- flashvars here
                  );
                 return false;

            );