如何在FancyBox中显示含有以下内容的iframe？

现在我写了一个用于在FancyBox窗口中加载iframe的标准代码。所以我指定了类型iframe和href与youtube params的链接。如何在FancyBox中显示含有以下内容的iframe？

$.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('<b>Any....</b>'); 
}

但这种情况下清除我的iframe ...

也试过：

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

它的作品，但我没有看到的内容，其隐藏的，块.fancybox-inner有高= 600px，但内容超过600px，所以我没有看到...

来源

2014-10-31 AllenDegrud

尝试参考resh你的fancybox（你的iframe需要被放置在“fancybox-inner”和显示块中以使其工作）一旦iframe被加载（如果iframe具有静态高度，则不需要等待其加载）。

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

    //resize fancybox 
    $.fancybox.update(); 
}

另一个解决方法是，到iframe加载到您的.fancybox-inner在beforeLoad -event功能。那样，fancybox应该确定内容的大小。

来源

2014-10-31 11:11:39 lin

第一个解决方案不起作用，你能解释第二个吗？加载iframe后，'.fancybox-inner'的高度仍然是600px。我使用版本：2.1.4。也试过：'$ .fancybox.update（）' – AllenDegrud 2014-10-31 11:41:00

我现在试过了：'$ .fancybox.resize（）; $ .fancybox.update（）;'它可以工作，但窗口处于完整模式。怎么修？ – AllenDegrud 2014-10-31 11:50:13

@AllenDegrud，请开一个新的问题，因为这个问题已经解决，你的问题是一个新问题。请给我答案的“勾号” - >表示正确的答案。干杯，林 – lin 2014-10-31 15:20:56

你可以使用的fancybox title添加任何你想要的HTML内容，你只需要设置一个变量内部的HTML内容，如：

var template = 
    '<div id="VideoModalDisplay">' + 
    '<p>whatever html content you want to set here</p>' + 
    '</div>';

...或内部（隐藏）HTML <div>像：

<div id="template" style="display: none;"> 
    <div id="VideoModalDisplay"> 
     <p>Lorem Ipsum</p> 
     <p>whatever html content you want to set here</p> 
     <p>...etc...</p> 
    </div> 
</div>

...和拉像

的 beforeLoad回调里面的内容（使用第二个选项）

现在，根据您的jsfiddle，如果你想从这个网站

<div class="play" id="4" data-width="850" data-height="470" data="https://www.youtube.com/embed/8UVNT4wvIGY"></div>

打电话的fancybox ......你可能需要调整它像

<div class="play" id="4" data-fancybox-href="https://www.youtube.com/embed/8UVNT4wvIGY" data-width="850" data-height="470" ></div>

通知我将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），但我们要重写它以添加VARinfo与YouTube尾随参数。

查看完整的代码JSFIDDLE

无需出汗试图添加内容后调整其大小的fancybox。

来源

2014-10-31 19:39:21 JFK

如何在FancyBox中显示含有以下内容的iframe？

回答

相关问题