Question

现在我写了一个标准代码，用于在窗口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('<b>Any....</b>');
}

但是这个案子清楚了我的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();
}

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

Answer 2

你可以使用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回调内（使用第二个选项），如

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

现在，根据您的 jsfiddle ，如果您想从此html调用fancybox

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

...你可能想像

那样调整它

<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将知道从何处获取内容。

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

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

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

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

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中）中获取其值，但我们会覆盖它以添加 var info你的youtube尾随参数。

请参阅 JSFIDDLE

中的完整代码

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

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

2 个答案: