jQuery Fancybox 和 YouTube 嵌入
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/27193010/
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
jQuery Fancybox and YouTube embeds
提问by pealo86
I'm trying to get a YouTube embed to open up in a Fancybox. I've based it on the code on the Fancybox page — http://fancyapps.com/fancybox
我正在尝试让 YouTube 嵌入在 Fancybox 中打开。我已经基于 Fancybox 页面上的代码 - http://fancyapps.com/fancybox
Here is what I have:
这是我所拥有的:
<a class="various fancybox" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>
And then in call.js
然后在 call.js
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
})
But each time I click the link, it just opens up the YouTube video full-screen in the same window... not in a Fancybox
但是每次我点击链接时,它都会在同一个窗口中全屏打开 YouTube 视频......而不是在 Fancybox
I've check to make sure my Js files are loading and they are, also I'm getting no errors in the FF console.
我已经检查以确保我的 Js 文件正在加载并且它们正在加载,而且我在 FF 控制台中也没有收到任何错误。
Can anyone see what I'm doing wrong?
谁能看到我做错了什么?
回答by JFK
If you are using youtube's embed
format like :
如果您使用的是 youtube 的embed
格式,例如:
<a class="various fancybox" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>
... then you have three options :
...那么你有三个选择:
1). Add the special class fancybox.iframe
to your link like
1)。将特殊课程添加fancybox.iframe
到您的链接中,例如
<a class="various fancybox fancybox.iframe" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>
noticethis classis additional to the existing .fancybox
class(yes, the format with dot is OK)
注意这个类是现有.fancybox
类的附加类(是的,带点的格式是可以的)
2). Add the special data-fancybox-type="iframe"
attribute to your link like :
2)。将特殊data-fancybox-type="iframe"
属性添加到您的链接中,例如:
<a class="various fancybox" data-fancybox-type="iframe" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>
3). Add type: "iframe"
to your custom initialization script like :
3)。添加type: "iframe"
到您的自定义初始化脚本中,例如:
$(".fancybox").fancybox({
type: "iframe",
// other API options
})
Choose any of those options (you don't need to set all)
选择这些选项中的任何一个(您不需要全部设置)