Firefox错误地显示iframe youtube视频
我已经使用了优秀的jQuery swiper插件(http://www.idangero.us/sliders/swiper/)创建了一个滚动播放器界面，可以一张接一张地显示内容“幻灯片”，每张幻灯片都是一个。我需要一些幻灯片来显示Youtube视频，使用标准的方法。这在Safari和Chrome中运行得很好，但在Firefox中发生了一件奇怪的事情。播放器界面是760像素宽(它都在一个指定了这个宽度的元素中)，在一个狭窄的窗口中，Firefox只显示一个黑色矩形，而不是Youtube视频播放器。但是，如果Firefox窗口的宽度为1521像素或更宽(即超过播放器宽度的两倍)，Youtube播放器将显示在正确的位置-但没有一个UI可单击(悬停更改仍会发生)。
此外，如果我在Firefox中右键单击Youtube播放器，Flash上下文菜单会出现在Flash播放器右侧超过1000像素的屏幕上。
这非常奇怪--我在http://backattheranch.ca/matt/player/上放了一个演示，供人们浏览。任何帮助都将不胜感激。谢谢!
回答 1
Stack Overflow用户
发布于 2013-12-11 00:27:19
它是.swiper-wrapper父元素上的transform: translate3d();。我们遇到了类似的问题，移除父元素上的转换解决了它。
要重新创建此问题，请执行以下操作：
- 在您的示例页面上，选择项目#3 --包含视频。
- 打开FireBug，选择div.swiper-wrapper元素。
- 在CSS编辑器中，在element.style和.swiper-wrapper类中的translate3d中输入'x‘。你的视频将会消失，但不要害怕！要返回并测试这确实是问题所在，
- 在FireBug编辑器的element.style中输入以下CSS：
left: -1520px
您的视频将重新出现，您将看到它是可点击的，并且可以播放。
我刚刚看了一下idangero.us网站，我没有看到这个问题的更新；看起来他们的播放器使用了translate3d变换来滑动东西。不幸的是，这意味着你需要找到一个不同的swiper解决方案，不使用translate3d来定位你的元素，或者请求他们修复这个问题并等待修复。
如果你坚持使用支持视频的滚动条，我强烈推荐Malsup's Cycle 2。具有很好的可扩展性和文档记录。您可以看到一个demo of the slider running video, working in Firefox here。
在Malsup Cycle 2 downloads中，你会发现有支持touch features的触摸友好的swipe插件。
我们在Getty's website上使用了Cycle 2，但不幸的是，我们的滑块目前都没有显示视频。
https://stackoverflow.com/questions/16744800
复制
腾讯云开发者
