How show iframe with content below at FancyBox?

Question

Now I wrote a standart code for loading iframe in window FancyBox. So I specified type iframe and href link with 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
                }
            }
        });

I need show iframe youtube and after it show any HTML code. How to do? I tried in method:

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

But this case clear my iframe...

Also tried:

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

It is works, but I dont see content, its hidden, the block .fancybox-inner has height = 600px, but content is more than 600px, so I dont see...

Answer 1

Try to refresh your fancybox (Your iframe needs to be placed inside "fancybox-inner" and display block to make this work) once the iframe is loaded (no need for wait until its loaded if your iframe has a static height).

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

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

An other solution is, to load your iframe into your .fancybox-innerin beforeLoad-event function. In that way, the fancybox should size the content right.

Answer 2

You could use the fancybox title to add any html content you want, you just need to set that html content inside a variable like :

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

... or inside of a (hidden) html <div> like :

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

... and pull that content inside the beforeLoad callback (using the second option) like

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

Now, based on your jsfiddle, if you want to call fancybox from this html

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

... you may want to tweak it like

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

Notice I changed data="{youtube URL}" into data-fancybox-href="{youtube URL}" so fancybox will know where to get the content from.

Also notice that if the URL has this format

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

... you don't actually need the replace() method to convert it.

After, get the different values (width, height, etc) from the data attributes inside the beforeLoad callback like :

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");
}

Notice this.href, this.title, this.width and this.height refer to default values of fancybox that can be overridden inside the callback.

Also notice that this.href gets its value from the special data-fancybox-href attribute (in your html) but we are overriding it to add the var info with your youtube trailing parameters.

See full code in JSFIDDLE

No need to sweat trying to resize fancybox after adding the content.