jquery fancybox firefox 尺寸问题

Question

我正在使用 jquery fancybox 在我的网站上显示覆盖视频。以下 jquery 代码在 Chrome 中运行良好，但在 Firefox 中，视频会缩小，并且保存视频的容器的尺寸也会缩小。以下是jquery代码

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

以下是来自 chrome 和 firefox 的图像

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

Answer 1

如果您使用type : "iframe"，您可能不需要使用媒体助手(它实际上将内容移动到iframe) >)。

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

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

所以这段代码应该可以在 Firefox、Chrome 甚至 IE7+ 中发挥作用:

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