1

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

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

它使用 jquery.fancybox-media.js

4

1 回答 1

3

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

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

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

Fancybox 使用iframeyoutube 视频的类型，但他们的主页仍然使用默认值 ( true)，但是在您自己的网页中，您应该禁用此选项，您的 youtube 视频将在 iPhone/iPad 上正常工作：

例如这个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

...应该可以正常工作。

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

请参阅iPad 中的JSFIDDLE ;)

编辑：如果您不想拥有固定iframe大小（响应能力），那么只需摆脱大小选项，例如：

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

在 iPad 中查看更新的JSFIDDLE

于 2013-05-16T19:14:37.550 回答