2

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>
5
  • Is the content of that Iframe from the same domain?
    – Zuul
    Jun 13, 2012 at 21:54
  • 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, 2012 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, 2012 at 23:59
  • @Zuul: Yes, it's in the same domain - same folder on the domain even.
    – shimmoril
    Jun 14, 2012 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, 2012 at 14:54

3 Answers 3

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.

3
  • #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, 2012 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, 2012 at 19:05
  • Nice. Would have been nice if I had found that one in my search!
    – shimmoril
    Jun 14, 2012 at 20:30
1

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

1
  • 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, 2012 at 14:56
-1

add autoSize to :

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

or :

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.