我正试图让YouTube嵌入在fancybox中打开.我基于fancybox页面上的代码 –
http://fancyapps.com/fancybox
这是我有的：
<a class="varIoUs fancybox" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>
然后在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'
});
})
但每次点击链接时,它都会在同一个窗口中全屏显示YouTube视频…而不是在fancybox中
我已经检查以确保我的Js文件正在加载它们,我在FF控制台中也没有错误.
谁能看到我做错了什么？
解决方法
如果您使用youtube的嵌入格式,例如：
<a class="varIoUs fancybox" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>
…那你有三个选择：
1).将特殊类fancybox.iframe添加到您的链接中
<a class="varIoUs fancybox fancybox.iframe" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a>
JSFIDDLE
注意这个类是现有.fancybox类的补充(是的,带点的格式是OK)
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>
JSFIDDLE
3).在自定义初始化脚本中添加类型：“iframe”,如：
$(".fancybox").fancybox({
type: "iframe",// other API options
})
JSFIDDLE
选择任何这些选项(您不需要设置所有选项)