使用 jquery.fancybox-media.js 时，Youtube 视频无法在 iPad 上的 fancybox 中工作

我正在尝试在具有响应式功能的 fancybox 中使用 youtube 视频，以便它可以根据我使用 jquery.fancybox-media.js 的设备调整其尺寸，并且它在桌面上运行良好，但视频无法在 iPad 上播放。

Visit http://fancyapps.com/fancybox/然后点击 Youtube(iframe) 它只能在桌面上播放，但不能在 iPad 上播放。

它使用 jquery.fancybox-media.js

从 fancybox 2.1.0 版本开始，有一个iframeAPI 选项允许您预加载 iframe 的内容；默认值为true.

不幸的是，自从 jQuery v1.9+ 以来，我发现这个选项在尝试显示时会以某种方式产生问题iframe内容，特别是流媒体或 PDF 文档。

作为解决方法，我一直在禁用iframe预加载并修复了报告的许多问题。

Fancybox用途iframeyoutube 视频的类型，但他们的主页仍然使用默认值（true），但是在您自己的网页中，您应该禁用此选项，您的 YouTube 视频将在 iPhone/iPad 上正常运行：

This hrml例如

<a class="fancybox" href="http://www.youtube.com/embed/3l8MwU0IjMI?wmode=opaque&autoplay=1">show youtube in fancybox</a>

...用这个脚本

jQuery(document).ready(function($) {
  $(".fancybox").fancybox({
    width: 620, // or whatever
    height: 420,
    type: "iframe",
    iframe : {
      preload: false
    }
  });
}); // ready

...应该工作得很好。

NOTE那autoplay=1该参数在移动设备上不起作用，因此您仍然需要click在视频上开始（这对我来说很有意义，因为您可能不想无意中浪费您的数据计划）

See JSFIDDLE在 iPad 上；）

EDIT: 如果你不想固定iframe大小（响应能力），然后删除大小选项，例如：

jQuery(document).ready(function($) {
  $(".fancybox").fancybox({
    type: "iframe",
    iframe : {
      preload: false
    }
  });
}); // ready

查看更新JSFIDDLE in iPad