在 Fancybox jquery 中打开 youtube 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2542252/
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
Open youtube video in Fancybox jquery
提问by AlexC
Can I open youtube video in fancybox.
我可以在fancybox中打开youtube视频吗？
I have a list of youtube videos links , for ex:
我有一个 youtube 视频链接列表，例如：
<a href="http://www.youtube.com/watch?v=PvbqV8W96D0" class="more">Play</a>
and fancybox :
和花式盒：
$("a.more").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
I don't want to create for each video new embed object.
我不想为每个视频创建新的嵌入对象。
Is there some plug in, or a other way to do that ?
是否有一些插件，或其他方式来做到这一点？
回答by JKirchartz
THIS IS BROKEN, SEE EDIT
这是坏了，见编辑
<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>
This way if the user javascript is enabled it opens a fancybox with the youtube embed video, if javascript is disabled it opens the video's youtube page. If you want you can add
这样，如果用户 javascript 被启用，它会打开一个带有 youtube 嵌入视频的fancybox，如果 javascript 被禁用，它会打开视频的 youtube 页面。如果你愿意，你可以添加
target="_blank"
to each of your links, it won't validate on most doctypes, but it will open the link in a new window if fancybox doesn't pick it up.
对于您的每个链接，它不会在大多数文档类型上验证，但如果fancybox 没有选择它，它将在新窗口中打开链接。
EDIT
编辑
this, above, isn't referenced correctly, so the code won't find hrefunder this. You have to call it like this:
this，上面没有正确引用，所以代码href在this. 你必须这样称呼它：
$("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;
});
as covered at http://fancybox.net/blog#4, replicated above
如http://fancybox.net/blog#4 所述，上面复制了
回答by Sonny
I started by using the answers here, but modified it to use YouTube's new iframeembedding...
我开始使用这里的答案，但对其进行了修改以使用 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
});
});
回答by AlexC
$("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;
});
回答by Joshua Adrian
If you wanna add autoplay function to it. Simply replace
如果您想为其添加自动播放功能。只需更换
this.href.replace(new RegExp("watch\?v=", "i"), 'v/'),
with
和
this.href = this.href.replace(new RegExp("watch\?v=", "i"), 'v/') + '&autoplay=1',
also you can do the same with vimeo
你也可以用 vimeo 做同样的事情
this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id='),
with
和
this.href = this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=') + '&autoplay=1',
回答by Lucian
This has a regular expression so it's easier to just copy and paste the youtube url. Is great for when you use a CMS for clients.
这有一个正则表达式，因此只需复制和粘贴 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;
});
回答by Kaless1n
Thanx, Alexander!
谢谢，亚历山大！
And to set the fancy-close button above the youtube's flash-content add 'wmode' to 'swf' parameters:
并在 youtube 的 flash 内容上方设置花式关闭按钮，将 'wmode' 添加到 'swf' 参数：
'swf': {'allowfullscreen':'true', 'wmode':'transparent'}
