jquery - 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"，则可能不需要使用media helpers（实际上将内容移动到 中iframe）。

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

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

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

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