jquery fancybox firefox dimensions issue

Question

I am using jquery fancybox to show an overlay video on my website. The following jquery code works fine in Chrome but in Firefox, the video is diminished and the dimensions of the container holding the video are diminished. Following is jquery code

$('.fancybox-media').fancybox({
    'type': 'iframe',
    'width': 800,
    'height': 580,
    'autoDimensions':   false,
    helpers     : {
         media: true
    }
});

Below are images from chrome and firefox

Any help ins this aspect will be appreciated.

Answer 1

If you are using type : "iframe" you may not need to use the media helpers (which actually moves the content inside an iframe).

Also, if you want fancybox to keep fixed dimensions, you would need to add fitToView: false, otherwise fancybox will be resized to fit in the view port for smaller screens.

Additionally, you may need to disable iframe preload to avoid some known issues when the content is not completely loaded (browsers may process the size calculation differently)

so this code should do the trick in Firefox, Chrome and even in IE7+ :

$('.fancybox-media').fancybox({
    type: 'iframe',
    width: 800,
    height: 580,
    // add
    fitToView: false,
    iframe : {
      preload : false
    }
});