如何在 jQuery 灯箱 (Wordpress) 中显示 Youtube 视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4703951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display Youtube videos in a jQuery lightbox (Wordpress)?
提问by alexchenco
I tried lightbox-plus, fancybox, etc...
我尝试过 lightbox-plus、fancybox 等...
But I couldn't figure how to do it.
但我想不出该怎么做。
Those videos are images posts with a link containing a Youtube video:
这些视频是带有包含 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, for example, let me add a lightbox to images, but if the image links to a Youtube video it doesn't work.
例如，用于 Wordpress 的 Fancybox，让我向图像添加灯箱，但如果图像链接到 Youtube 视频，则它不起作用。
Any suggestions?
有什么建议？
回答by Tom
A simple way to do this would be to use PrettyPhoto (link to site, link to wordpress plugin). It is simple to activate:
一个简单的方法是使用 PrettyPhoto（链接到站点，链接到 wordpress 插件）。激活很简单：
$('a[rel="prettyPhoto"], .myvideolinkclass').prettyPhoto();
And the HTML is pretty clean:
并且 HTML 非常干净：
<a href="http://youtube.com/a-real-youtube-link" rel="prettyPhoto[youtube]">My Awesome Youtube Video</a>
回答by jmort253
Have you seen the FancyBox Blog? There is an example there of a YouTube video in a Fancybox:
你看过 FancyBox 博客吗？在 Fancybox 中有一个 YouTube 视频示例：
Script tag to import FancyBox:
导入 FancyBox 的脚本标签：
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>
JavaScript/Jquery to bind click event:
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:
HTML：
<a id="tip4" title="'Zombieland' Trailer"
href="http://www.youtube.com/watch?v=071KqJu7WVo&feature=player_embedded#at=41">
Try now
</a>
回答by alexchenco
I figured out 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>
It seems like it works with links with inline content attached to it.
它似乎适用于附加了内联内容的链接。
(Please let me know if there's a better solution to this).
（请让我知道是否有更好的解决方案）。
