问题
This might be tricky because the iframe content height/width depends on whether or not the user has the Flash plugin.
The iframe has a maxwidth of 800px, so it scales according to viewport. It loads swfobject.js, which detects the Flash plugin, and swiffit.js, which scales the swf according to the width of the iframe. If there is no Flash plugin, it loads an mp4 video, with a fixed width of 550px.
I did a dummy of it here:
http://www.casedasole.it/fancyfit/
The first button opens an iframe that loads the Flash movie (if you have flash). The second button loads a copy of the first iframe, but with swfobject.js and swiffit deleted so it behaves as if there is no Flash plugin (and therefore loads the mp4).
What changes to the fancybox settings would make iframe 2 adapt to the size of the video?
Update...
Found this: http://developersweblog.com/tag/fancybox-2/. Looks simple, can't get it to work.
Update 2
Thanks JFK, but I can't set fixed widths in advance - the iframe width depends on whether flash is present or not.
I've inserted parent.jQuery.fancybox.update()
as an onclick=
in the links to the iframes, in the script that detects flash in the iframes, and as a script in the div that holds the video. But both the flash iframe and the video iframe go to maxwidth (800px). The only thing that has any effect (and is somehow vaguely promising) so far is this:
beforeShow: function(){
this.width = $('.fancybox').contents().find('div#my_flash').width();
this.height = $('.fancybox').contents().find('div#my_flash').height();
}
Updated example: http://www.casedasole.it/fancyfit/
...in which "my_flash" is the div that contains the flash and, if not detected, contains the div that holds the video. With that, for some reason, the video width goes to minWidth 550px, as wanted, but the height is maxHeight (420px). That'd be OK, but the flash iframe also takes minWidth and maxHeight. Frustrating,,,,
来源:https://stackoverflow.com/questions/25666313/change-fancybox-iframe-size-according-to-content-height-width