如何在FancyBox上显示iframe以下的内容？

现在我写了一个标准代码，用于在窗口FancyBox中加载iframe。 所以我指定了类型iframe和href与youtube params的链接。

 $.fancybox({ 'type' : 'iframe', 'maxWidth': "90%", 'href' : href.replace(new RegExp('watch\\?v=', 'i'), 'embed/') + '?theme=dark&color=white&autohide=1&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&showinfo=0&autoplay=1', 'padding' : 0, 'margin' : 0, 'autoCenter': false, 'scrolling' : 'no', 'fitToView' : false, 'width' : 950, 'overlayShow': true, beforeLoad : function() { var template; var hash; var info; getVideo(id); }, afterLoad:function(){ $('.fancybox-inner').append(template); changeURL(matchYoutubeUrl(href)+'#'+id, info.VideoName, info); }, helpers: { overlay: { locked: false } } }); 

我需要显示iframe youtube并在显示任何HTML代码之后。 怎么做？ 我试过方法：

 afterLoad:function(){ // $('.fancy-content').html('Any....'); } 

但这个案子清楚了我的iframe ……

还尝试过：

 afterLoad:function(){ $('.fancybox-inner').append(template); } 

它是有效的，但我看不到内容，它隐藏，块.fancybox-inner有高度= 600px，但内容超过600px，所以我没看到……

Answer 1

尝试刷新你的fancybox（你的iframe需要放在“fancybox-inner”和显示块中才能使这个工作）一旦iframe被加载（如果你的iframe有一个静态高度，则无需等待它加载）。

 afterLoad:function(){ $('.fancybox-inner').append(template); //resize fancybox $.fancybox.update(); } 

另一个解决方案是，在beforeLoad -event函数.fancybox-inner iframe加载到.fancybox-inner中。 通过这种方式，fancybox应该正确调整内容的大小。

Answer 2

你可以使用fancybox title添加你想要的任何html内容，你只需要在变量中设置html内容，如：

 var template = '
' + '
whatever html content you want to set here
' + '
'; 

…或者（隐藏的）html

像：

 
 
 
Lorem Ipsum
 
whatever html content you want to set here
 
...etc...
 
  

…并在beforeLoad回调中使用该内容（使用第二个选项）

 beforeLoad: function () { // some more options var template = jQuery("#template").html(); this.title = this.title ? this.title + template : template; } 

现在，基于你的jsfiddle ，如果你想从这个html调用fancybox

…你可能想要调整它

请注意，我将data="{youtube URL}"更改为data-fancybox-href="{youtube URL}"因此fancybox将知道从何处获取内容。

另请注意，如果URL具有此格式

 https://www.youtube.com/embed/8UVNT4wvIGY 

…你实际上并不需要replace()方法来转换它。

之后，从beforeLoad回调中的data属性中获取不同的值（ width ， height等），如：

 beforeLoad: function () { var info = '?theme=dark&color=white&autohide=1&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&origin=http://whoismed.com&showinfo=0&autoplay=1'; // getVideo(id); var template = jQuery("#template").html(); this.href = this.href + info; this.title = this.title ? this.title + template : template; this.width = $(this.element).data("width"); this.height = $(this.element).data("height"); } 

注意 this.href ， this.title ， this.width和this.height引用了可以在回调中覆盖的fancybox的默认值。

另请注意， this.href从特殊的data-fancybox-href属性（在你的html中）中获取其值，但是我们将覆盖它以使用youtube尾随参数添加var info 。

请参阅JSFIDDLE中的完整代码

添加内容后，无需尝试调整fancybox的大小。