Fancybox 2 Dynamic Width Based on Content Size

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


<a class="fancybox-video" href="/user/intro-file.cfm" rel="file_name" title="View Video">File Name</a>


    scrolling   : 'no', 
    type        : 'iframe', 
    helpers     : { 
        title: null 

The video is user-uploaded, so I don't know the size. I will be setting a maxHeight and maxWidth on the Fancybox eventually, but I've removed them for easier troubleshooting.

How can I set the width of the Fancybox based on the content? With my test file, which is around 400px wide, the fancybox itself is being set to 830/800px wide (the outer and inner widths): screencap of too-wide fancybox

autoSize and fitToView have no effect. There's no CSS or code on the IFrame page that is setting a default width. If I force a width in the Fancybox code it works, but since my content is dynamic, it won't work for the live system.

I also tried adapting a function from another question asking about height resizing, but it didn't work either:

beforeShow  : function() { 
    $('.fancybox-iframe').load(function() { 

Edit: Added the code of the IFrame page I'm trying to load into the Fancybox:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
            <script type="text/javascript" src="/Javascript/jwplayer.js"></script>
            <script type='text/javascript'> 
                var max_video_width = 924;
                    flashplayer: "/VideoPlayer/player.swf",
                    controlbar: "bottom",
                    file: "/videos/file_name",
                    stretching: 'file_name',
                    autostart: true,
                    events: {
                        onMeta: function(event) {
                            if (get_meta) {
                                if(event.metadata.width != undefined && event.metadata.height != undefined) {
                                    get_meta = false;
                                    if (event.metadata.width > max_video_width) {
                                        var new_height = (max_video_width / (event.metadata.width / event.metadata.height))  
                                    else {


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.

Iframe width is currently not calculated. Maybe you could set width/height for each iframe like this -

add autoSize to :

    scrolling   : 'no', 
    type        : 'iframe',
    autoSize    : true, 
    helpers     : { 
        title: null 

or :

fitToView  : true,

Need Your Help

Allocate multidimensional array contiguously

c++ memory-management multidimensional-array

Another question related to this

How to sort a list of strings converted from nullable datetime

c# string list datetime nullable

I have a list of strings that I have created from nullable DateTime objects.