Fancybox 2 Dynamic Width Based on Content Size

Question

I\'ve got an IFrame being opened via Fancybox 2 that plays a video:

HTML:

Answer 1

Looking at your intro-file.cfm file makes things clearer.

If your code inside the file is working fine, I think that you could get the dimensions from the preview_wrapper container.

Just two questions:

• if you are using $ ... in $('.loading-video').slideUp() for instance, shouldn't you be including the jquery.js file inside your intro-file.cfm file?
• is this double ## before the selector in $('##preview_wrapper').width() correct?

Assuming that everything is working fine, then try including in your fancybox script:

  scrolling: "no", // optional to avoid scrollbars inside fancybox
  beforeShow: function(){
   this.width = $('.fancybox-iframe').contents().find('#preview_wrapper').width();
   this.height = $('.fancybox-iframe').contents().find('#preview_wrapper').height();
  }

... to get the dimensions from the player's wrapper.

Answer 2

add autoSize to :

$("a.fancybox-video").fancybox({
    scrolling   : 'no', 
    type        : 'iframe',
    autoSize    : true, 
    helpers     : { 
        title: null 
    }
});

or :

fitToView  : true,

Answer 3

Iframe width is currently not calculated. Maybe you could set width/height for each iframe like this - http://jsfiddle.net/vVKMF/