iframe 中的 FancyBox 图像在移动设备上没有响应

Question

我有一个小问题。我需要创建一个画廊， 在哪里嵌入 youtube-videos 一个普通的图像 显示。为了让箭头在图像和视频之间工作， 我必须使用 iframe 模式。所以我最终得到了这个：

<a href="url_of_embed_yt_vid" class="fancygal" rel="group"><img src="preview_for_vid"></a>
<a class="fancygal" rel="group" href="link_to_image"><img src="myimage"></a>


$('.fancygal').fancybox({
        'type'  : 'iframe',
        'scrolling' : 'no',
        'fitToView': true,
        'iframe' : {
                    'scrolling' : 'no',
                    'preload'   : false
                }                  
});

它完美地工作，除了在移动设备上，图像不会按比例缩小以适合fancybox（fancybox 具有正确的大小）。 如果我在笔记本电脑/台式设备上缩小浏览器，图像会正确缩小。

有没有人知道，可能是什么问题？

谢谢 索尼克

Answer 1

图像不必使用iframe 模式，只有 youtube 视频，所以这个脚本应该适用于两者：

$(".fancygal").fancybox({
    // 'type'  : 'iframe', //no needed
    scrolling: 'no',
    fitToView: true,
    iframe: {
        scrolling: 'no',
        preload: false
    }
});

然后将 fancygal 类设置为 all 链接，并将特殊类 fancybox.iframe 设置为 youtube 视频链接，例如：

<a class="fancygal fancybox.iframe" rel="group" href="{link to youtube 1}">youtube one</a>
<a class="fancygal fancybox.iframe" rel="group" href="{link to youtube 2}">youtube two</a>
<a class="fancygal" rel="group" href="{link to image 1}">image one</a>
<a class="fancygal" rel="group" href="{link to image 3}">image two</a>
... etc.

见JSFIDDLE