Ian Hoar – Passion for Technology – Geeking Out - Technology, Web, Toys, Games, Design, Entertainment, Gadgets, & Geeking Out

jQuery and Fancybox: How to automatically set the height of an iframe lightbox

jQueryFancybox is a pretty cool lightbox plugin for jQuery that I have been using for awhile now. It’s got a great feature set, looks good, and for the most part it just works out of the box. There is however one thing that was mind numbingly hard to figure out, and that was how to automatically set the height of an iframe lightbox. Fancybox has this functionality built in for inline content via the autoDimensions key, which is set to true by default. Unfortunately this is not the case for iframes. After some hair pulling I managed to piece together an auto height solution for Fancybox iframes, but this technique could also be used without Fancybox to find the height of any iframe.

Like most web challenges, the fix is quite simple, but almost every example I found always seemed to be missing one important piece of the puzzle.

  'hideOnContentClick' : true,
  'width' : 500,
  'type' : 'iframe',
  'padding' : 35,
  'onComplete' : function() {
    $('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height

In the above example we have given our lightbox an id of #lightbox. We initialize the plugin with some options and give it a type option of iframe. Now you can create your separate HTML file for the lightbox and link to it form your main page and give the link href an id of #fancy-box. If you would like to use multiple lightboxes on one page you could use a class instead of an id.

The iframe height magic happens when the onComplete event is triggered. Here you can set up a call call jQuery’s load function which will then be used to call the height function after the iframe has loaded—you cannot get the height until the frame source has fully loaded. The id of #fancybox-content is the name of the div that Fancybox wraps the iframe in. We then set the height of that div by checking the contents of the iframe and using jQuery’s find method to locate the body tag and then get the height. I found that the height was always off by about 30 pixels, thus the +30. This may be due to paddings and margins within the loaded HTML file, but you can fiddle around with it until you get the right offset. You should now have an iframed lightbox that auto sizes its height.

23 Comments to “jQuery and Fancybox: How to automatically set the height of an iframe lightbox”

  • Alessandro

    After 3 hours searching i finally solved my problem! Thanks for your post.
    Is it possible to do the same with width?

    • Ian Hoar

      Hi Alessandro,

      You specify the width to whatever you want it to fit in. I guess you could set the height and then try to figure out the width in order to fit the content. You would have to mess around with it, but the same concept should work.

      • Alessandro

        What I was trying to do is something like this:

        ‘onComplete’ : function() {
        $(‘#fancybox-frame’).load(function() {

        in short to automatically set the height and the width of an iframe lightbox but the code above doesn’t work.

    • ebricca

      for the width it is another identifier


  • Víctor Blasco

    Thank you so much!!! It works perfect 🙂

  • hina

    Thanks for sharing this !
    But it seems not working on Chrome, when the jquery is ‘onComplete’ the fancybox-content resize to 30px

    • javanoob

      are you test on local server or live?
      I facing same problem when test on local server, but after i live it, its working!

  • fmaurice

    Great ! Works perfectly.

  • Vinayak Kadolkar

    Hi that was Great Solution bu it doesn’t work in Chrome and IE(i know it sucks) Can you give some help in this Matter

  • Igor


    thanks for this great how to!! 🙂

    I have only one question:

    If I load a iframe which is for example 650px hight. The fancybox starts resizing from the center and after loading it isn’t in the center anymore. How can I center the fancybox after setting the hight?


  • Ricardo

    Today I was getting a strange scroll bar, even using your trick. I checked everything again to see if there wasnt anything wrongly. There wasn’t. I only got rid of the scrollbar when applying padding and margin with 0 values to the iframe body (Im loading an HTML file inside it).

    Cheers! And thank you, none the less.

  • Luis Andrade

    Dear Ian Hoar

    You saved my time with this great solution. After searching a lot of time i found your contribution.
    I included this line to achieve my necessities:
    ‘onStart’ : function() {
    $(“#fancybox-outer”).css(‘margin’, ‘-10px 0px 0px 0px’);

    Using PHP you could escape the apostrophe. You escape a character by typing a “slash” before:
    \’onStart\’ : function() {
    $(“#fancybox-outer”).css(\’margin\’, \’-10px 0px 0px 0px\’);

    Thank you so much, for sharing!

  • Ed


    I am a newbie with JS but I have the same problem. Where exactly should I paste the code provided? On the .js file, the parent page, the iframe page? Do I need to make changes to the links that open the iframe?

    Any help will be really appreciated.



    • Ian Hoar

      Hi Ed,

      The code is used where you initialize Fancybox. It’s done in the anonymous function in the onComplete option.

      • Aysha


        I am using this to set the fancybox iframe dynamically based on its content. and it works fine in Chrome and FF. But in IE, it remains the same height as the first time load. Any ideas how can this be fixed for IE ?


  • Arnoud

    Great solution for dynamic heights, thanks for sharing!
    However I’m running into 2 problems:
    1. Fancybox isn’t centered anymore.
    2. Fancybox is too high in Chrome and IE8+9 (FF and IE7 are fine).
    There’s like 100px whitespace in my Fancyboxes.

    Would be great if this can be solved, any ideas?

  • kevin

    Thank you so much!!! It works perfect

  • Stacie

    Been googling this for hours and this is the only article I’ve found that helped!
    Thank you thank you thank you!

  • Zsygab

    Thanks, it worked well!

  • Mohammed

    I am having trouble with fancy box pop up when try in mobile devices or resize the browser window to smaller size( like iPad). In such situation pop comes with vertical scrolling cuz the pop content is responsive and for smaller view port it pushed the content to single column layout.

    FYI: i am using bootstrap along with fancy box

  • fpgroups

    Trying to implement this fix but I am having heck of hard time getting it to work – Sure that this is due to my lack of understanding the basic principles of jquery and fancyfox properties.

    This is what I have:

    type : ‘iframe’,
    href : url,
    afterClose : exitfbox,
    closeClick : false,
    modal : false,
    fitToView : false,
    autoSize : false,
    width : 560,
    onComplete : function() {
    $(‘.fancybox-iframe’).load(function() { // wait for frame to load and then gets it’s height
    helpers : {
    overlay : { closeClick: false, }

    When I view source, layer fancybox-inner defaults to 600px – I know I can simply set height property within the above definition but I want the “dynamic” approach. The layer does not have an ID but a “class” hence the . in lieu of # above.

    What am I missing? What must I do?

    Thank you all in advance for your assistance!

  • Will Findlay

    Thanks for posting this! I have long tried to figure out how to overcome the issue where someone’s browser window is too short when opening a lightbox and this code appears to solve this problem by not letting the content get smushed.

  • Ryan

    I am using the latest update of “Easy FancyBox” plugin for Word Press and cannot get this to work. Hard to believe even after the latest updates iframes still do not fit to the window correctly with the only option being to set the fancybox overlay to be a % height & width of the total browser window. I have literally searched on/off for years to a solution and still have not been able to figure this out…