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