Firefox错误地显示iframe youtube视频

Question

我使用了优秀的jQuery swiper插件（http://www.idangero.us/sliders/swiper/）来创建滚动播放器界面，通过“幻灯片”显示内容“滑动”，每张幻灯片都是＆lt; article＆gt;。我需要一些幻灯片来显示Youtube视频，使用标准＆lt; iframe＆gt;方法。这适用于Safari和Chrome，但在Firefox中会发生奇怪的事情。播放器界面宽760像素（全部位于指定宽度的＆lt; section＆gt;元素内），在狭窄的窗口中，Firefox只显示黑色矩形而不是Youtube视频播放器。但是，如果Firefox窗口的宽度或宽度为1521像素（即，宽度超过播放器宽度的两倍），则Youtube播放器会出现在正确的位置 - 但是没有一个UI可以点击（但悬停的更改确实会发生）。 / p>

此外，如果我右键点击Firefox中的Youtube播放器，我的屏幕上的Flash上​​下文菜单会出现在Flash播放器右侧超过1,000个像素的位置。

这很奇怪 - 我已经在http://backattheranch.ca/matt/player/进行了演示，以供人们浏览。任何帮助，将不胜感激。谢谢！

Answer 1

这是.swiper-wrapper父元素上的transform: translate3d();。我们遇到了类似的问题，并在父元素上删除了该变换，修复了它。

重新创建这是影响您的问题：

1. 在您的示例页面上，选择项目＃3 - 包含视频。
2. 弹出打开的FireBug，选择div.swiper-wrapper元素。
3. 在CSS编辑器中，'x'在element.style和.swiper-wrapper类中的translate3d上。你的视频会消失，但不要害怕！要把它带回来并测试这确实是个问题，

4. 在FireBug编辑器的element.style中输入以下CSS：

   left: -1520px

您的视频会重新出现，您会看到它可以点击并播放。

我刚看了一下idangero.us网站，我没有看到这个问题的更新;看起来他们的玩家使用translate3d变换来滑动周围的东西。不幸的是，这意味着您将需要找到一个不使用translate3d定位元素的不同swiper解决方案，或者请求他们修复此问题并等待修复。

如果您遇到支持视频的滚动条，我强烈推荐Malsup's Cycle 2。非常可扩展，文档齐全。您可以看到demo of the slider running video, working in Firefox here。

在Malsup Cycle 2 downloads中，您会发现有触摸友好的滑动插件可启用touch features。

我们在Getty's website上使用了周期2，但遗憾的是我们的滑块目前都没有显示视频。