Fancybox 2 Dynamic Width Based on Content Size

Question

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

HTML:

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

Javascript:

$("a.fancybox-video").fancybox({
    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 http://img528.imageshack.us/img528/3872/fancyboxwidth.png

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() { 
        $('.fancybox-inner').width($(this).contents().find('body').width()); 
    }); 
}

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <body>
        <cfoutput>
            <script type="text/javascript" src="/Javascript/jwplayer.js"></script>
            <script type='text/javascript'> 
                var max_video_width = 924;
                jwplayer("preview").setup({
                    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))  
                                        jwplayer("preview").resize(max_video_width,new_height);
                                        jwplayer("preview").stop();
                                        $('##preview_wrapper').width(max_video_width).height(new_height);
                                    } 
                                    else {
                                        jwplayer("preview").resize(event.metadata.width,event.metadata.height);
                                        jwplayer("preview").stop();
                                        $('##preview_wrapper').width(event.metadata.width).height(event.metadata.height);
                                    }
                                    $('.loading-video').slideUp('fast',function(){$('.loading-video').remove()});
                                }
                            }
                        }
                    }
                });
            </script>
        </cfoutput>
    </body>
</html>

`The video is user-uploaded, so I don't know the size` ... does the video have at least a selector that you can identify? .... does the `intro-file.cfm` have a common html structure or does it vary from user to user? ... you should show the rendered html code of `intro-file.cfm` in that case. — JFK, Jun 13 '12 at 23:55
This `$(this).contents().find('body').width()` will never work because `body` will always render at 100% width of the browser or the iframe that contains it, unless you have set specific css dimensions to the tag. — JFK, Jun 13 '12 at 23:59
@Zuul: Yes, it's in the same domain - same folder on the domain even. — shimmoril, Jun 14 '12 at 14:32
@JFK: The intro-file.cfm does have a common HTML structure. I've added the code for the intro-file.cfm page to my question. Thanks for the clarification on the body.width attempt as well. — shimmoril, Jun 14 '12 at 14:54

score 5 · Accepted Answer · answered Jun 14 '12 at 18:37

5

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.

answered Jun 14 '12 at 18:37

JFK

40,963
31
133
306

#1 - The jquery is actually being included via a cfinclude, I just omitted it as irrelevant for the purposes of my question. #2 - It's correct because I'm coding in ColdFusion which uses # as a special character. Your code works perfectly! Thanks for helping me work through this. – shimmoril Jun 14 '12 at 18:57
One note for anyone looking at this is the future - I ended up adding a bit of padding to the calculated height/width since the white Fancybox border wasn't quite the same all the way around my player: this.width = $('.fancybox-iframe').contents().find('#preview_wrapper').width() + 15; – shimmoril Jun 14 '12 at 19:05
Nice. Would have been nice if I had found that one in my search! – shimmoril Jun 14 '12 at 20:30

score 1 · Answer 2 · answered Jun 14 '12 at 08:08

1

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

answered Jun 14 '12 at 08:08

Janis

8,593
1
21
27

I did see that in my search, but I'm not sure how it applies to my situation. I could set the default height/width on the iframe, but then how would I calculate it based on the content in the Fancybox function? – shimmoril Jun 14 '12 at 14:56

mgraph · Answer 3 · 2012-06-13T21:38:59.207

-1

add autoSize to :

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

or :

fitToView  : true,

edited Jun 13 '12 at 21:38

answered Jun 13 '12 at 21:33

mgraph

15,238
4
41
75

Neither of those options are in the v2 documentation: http://fancyapps.com/fancybox/#docs – shimmoril Jun 13 '12 at 21:36
@shimmoril try `autoSize:true,` – mgraph Jun 13 '12 at 21:39
@shimmoril or `fitToView : true,` – mgraph Jun 13 '12 at 21:41
From my original question: "autoSize and fitToView have no effect." – shimmoril Jun 14 '12 at 14:32

Fancybox 2 Dynamic Width Based on Content Size

3 Answers3

Linked