Question

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

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

它使用jquery.fancybox-media.js

Answer 1

自fancybox版本2.1.0起，有一个iframe API选项，允许您预加载iframe的内容;默认值为true。

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

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

Fancybox为youtube视频使用iframe类型，但其主页仍然使用默认值（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

使用jquery.fancybox-media.js时，Youtube视频无法在ipad上的fancybox中运行

1 个答案: