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

Question

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

$.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

加载 iframe 后，尝试刷新您的 fancybox（您的 iframe 需要放置在“fancybox-inner”内并显示块才能使其工作）（如果您的 iframe 具有静态高度，则无需等待加载） .

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

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

另一种解决方案是将 iframe 加载到 .fancybox-innerin beforeLoad-event 函数中。这样，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 会知道从哪里获取内容。

还要注意，如果 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 中）获取其值，但我们将覆盖它以添加 var info 与您的 youtube 尾随参数。

在 JSFIDDLE

中查看完整代码

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