如何在 jQuery 灯箱（Wordpress）中显示 Youtube 视频？答案

【问题标题】：How to display Youtube videos in a jQuery lightbox (Wordpress)?如何在 jQuery 灯箱（Wordpress）中显示 Youtube 视频？
【发布时间】：2011-01-16 05:18:14
【问题描述】：

我尝试过 lightbox-plus、fancybox 等...

但我不知道该怎么做。

这些视频是带有包含 Youtube 视频链接的图片帖子：

<p><a href="http://www.youtube.com/watch?v=zUN826BdvV4">
<img class="alignnone size-thumbnail wp-image-40" 
title="Screenshot" src="http://localhost/custom-post-type/
wp-content/uploads/2011/01/Screenshot2-150x150.png" 
alt="" width="150" height="150" /></a></p>

Fancybox for Wordpress，例如，让我给图片添加一个灯箱，但如果图片链接到 Youtube 视频，它就不起作用了。

有什么建议吗？

【问题讨论】：

你能发布你的 JavaScript/JQuery 代码吗？只发布 HTML 只是发布了一半的问题。
@jmort253 我正在使用 Fancybox for Wordpress 插件。它不需要任何 javascrit，它只适用于任何附加媒体的链接
另外，你说它不起作用是什么意思？
这里有某种 JavaScript 在起作用。这不是魔术。您的页面上是否有任何可以帮助解决问题的 JavaScript？我知道您自己没有编写 JavaScript，但它必须存在，除非 Wordpress 中的 Fancybox 使用 Flash。我建议您使用 Chrome Debugger 或 Firebug 进行检查。我敢打赌这很简单。

标签： wordpress fancybox

【解决方案1】：

一个简单的方法是使用 PrettyPhoto (link to site, link to wordpress plugin)。激活很简单：

$('a[rel="prettyPhoto"], .myvideolinkclass').prettyPhoto();

而且 HTML 非常干净：

<a href="http://youtube.com/a-real-youtube-link" rel="prettyPhoto[youtube]">My Awesome Youtube Video</a>

【讨论】：

【解决方案2】：

您看过 FancyBox 博客吗？ Fancybox 中有一个 YouTube 视频示例：

http://fancybox.net/blog

脚本标签导入 FancyBox：

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>

JavaScript/Jquery 绑定点击事件：

$("#tip4").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;
});

HTML：

<a id="tip4" title="'Zombieland' Trailer"
    href="http://www.youtube.com/watch?v=071KqJu7WVo&amp;feature=player_embedded#at=41">
        Try now
</a>

【讨论】：

我尝试使用 Fancybox for Wordpress 插件来做这件事，但我认为它不起作用。
也许可以尝试使用博客上的技术。 Wordpress 非常适合与其他工具配合使用。

【解决方案3】：

我发现how：

<div style="text-align: center;"><a class="fancybox" href="#welcomevideo"><img src="http://www.howieolson.com/wp-content/uploads/2010/04/howie-olsen-welcome-video.jpg" width="251px" height="188px" alt="Welcome To High Output"></a></div>

<div style="display:none" id="welcomevideo">
<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11051269&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object>
</div>

它似乎适用于带有内联内容的链接。

（如果有更好的解决方案，请告诉我）。

【讨论】：

+1 - 这就是我在 Fancybox Wordpress 插件论坛中看到的内容。它看起来不正确，因为对象通常用于嵌入诸如闪存之类的东西，但如果它有效并且被记录为有效的解决方案，那么我说去吧:)