使用jquery.fancybox-media.js时，Youtube视频无法在ipad上的fancybox中运行 [英] Youtube Video not working within fancybox on ipad when using jquery.fancybox-media.js

问题描述

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

I am trying to use youtube video within a fancybox with responsive features such that it can adjust its dimensions according to the device for that i had used jquery.fancybox-media.js and it works well on desktop but video doesn't play on iPad .

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

Visit http://fancyapps.com/fancybox/ then clicking on Youtube(iframe) it only plays on desktop but not on iPad.

它使用jquery.fancybox-media.js

It uses jquery.fancybox-media.js

推荐答案

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

Since fancybox version 2.1.0 there is an iframe API option that allows you to preload the contents of an iframe; the default value is true.

不幸的是，因为jQuery v1.9 +我看到这个选项以某种方式创建尝试显示 iframe 内容时出现问题，特别是流媒体或PDF文档。

Unfortunately, since jQuery v1.9+ I have seen that this option somehow creates issues while trying to display iframe content, specifically with streamed media or PDF documents.

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

As a workaround, I have been disabling the iframe preload and that has fixed many of the issues reported.

Fancybox为youtube视频使用 iframe 类型，但其主页仍然使用默认值（ true ），但是在您自己的网页中，您应禁用此选项，您的YouTube视频将在iPhone / iPad上正常运行，而且没有问题：

Fancybox uses iframe type for youtube videos, but their homepage still uses the default value (true), however in your own web pages, you should disable this option and your youtube videos will work in iPhone/iPad with no issue :

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

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

... should work just fine.

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

NOTE that the autoplay=1 parameter doesn't work in mobile devices, so you still need to click on the video to start (which make sense to me since you may not want to waste your data plan unintentionally)

参见 iPad中 JSFIDDLE ;）

See JSFIDDLE in iPad ;)

编辑：如果您不想拥有固定的 iframe 尺寸（响应性），那么只需摆脱像：

EDIT : if you don't want to have a fixed iframe size (responsiveness), then just get rid of the size options like :

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

查看更新 JSFIDDLE

See updated JSFIDDLE in iPad

这篇关于使用jquery.fancybox-media.js时，Youtube视频无法在ipad上的fancybox中运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！