jQuery fancybox Firefox尺寸问题 [英] jquery fancybox firefox dimensions issue

问题描述

我正在使用jquery fancybox在我的网站上显示覆盖视频.以下jquery代码在Chrome中可以正常运行，但在Firefox中，视频会减少，并且容纳视频的容器的尺寸也会减少.以下是jQuery代码

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
    }
});

下面是来自chrome和firefox的图像

Below are images from chrome and firefox

在这方面的任何帮助将不胜感激.

Any help ins this aspect will be appreciated.

推荐答案

如果使用的是type : "iframe"，则可能不需要使用media helpers(实际上是将内容移动到iframe中).

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

此外，如果您希望fancybox保持固定尺寸，则需要添加fitToView: false，否则fancybox将被调整大小以适合较小屏幕的视口.

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.

另外，您可能需要禁用iframe preload，以避免在内容未完全加载时出现某些已知问题(浏览器可能会以不同的方式处理大小计算)

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)

因此，此代码应该可以在Firefox，Chrome甚至是IE7 +中发挥作用:

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
    }
});

这篇关于jQuery fancybox Firefox尺寸问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！