0

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,,,,

plugincontainer
  • 630
  • 2
  • 9
  • 28
  • maybe this may help http://stackoverflow.com/a/10776520/1055987 try setting dimensions in your `` or `` tags (or another element) inside your iframe and look for them as in the referred answer. Or you could call `parent.jQuery.fancybox.update()` from within the iframe inside the (fallback) logic that checks for the flash plugin – JFK Sep 04 '14 at 16:32
  • But... Your solution at http://www.picssel.com/playground/jquery/getDimensionFromIframe_27may12.html might be a good alternative. – plugincontainer Sep 04 '14 at 20:59
  • @JFK Almost there! I played with your iframe resizer here: http://www.casedasole.it/fancyfit2/JFK/ It works well for what I need, but there is one problem as you will see - I need a link in iframe1 to 1frame2, but iframe2 does not fully resize. I did a dummy here (with modal: true) of the full adaptation: http://www.casedasole.it/fancyfit2/ . The opening iframe simulates "no Flash plugin detected". Any suggestions for getting that in-iframe link working? Thanks – plugincontainer Sep 05 '14 at 09:57
  • why you don't try on the iframed page (video.html) something like `` or change your script in the parent page to `this.width = ($('.fancybox-iframe').contents().find('video').width());` instead of `html` since you already set dimensions to that element – JFK Sep 05 '14 at 18:10
  • No luck - it works fine as a gallery, but I'm probably pushing it a bit far. But just means I'll have to re-think the approach (still using fancybox of course, it works well on all devices). Thanks for your help. – plugincontainer Sep 05 '14 at 19:45
  • If you leave your test pages online, I will clone them and play with them this evening (no time now) – JFK Sep 05 '14 at 20:35
  • Many thanks, JFK, but never mind, my latest idea is to display the flash and the mp4s at the same size, 640px (it was the different sizes - Flash 800px and mp4 550px that created the re-size problem). But I'll leave the files there if they're useful. – plugincontainer Sep 05 '14 at 21:59

0 Answers0