Youtube iframe 嵌入视频不工作（黑屏）答案

【问题标题】：Youtube iframe embedded video not working (black screen)Youtube iframe 嵌入视频不工作（黑屏）
【发布时间】：2012-04-07 02:53:46
【问题描述】：

在 Diveboard 上，我们对照片滑动进行了很好的修改以支持视频

一切都很顺利，直到我发现 Firefox 11 和 12 beta 不再播放嵌入的 youtube 视频...似乎它们已加载，我们可以听到声音广告 pufff 没有图像...所以它是 youtube 广播你可以在这里看到一个例子：Video example page

而且我一直在挠头，但我一无所知:( :(

编辑：显然这只是 OSX 上的问题！！！这让我更加无能为力...

任何提示都会被欣赏

iframe 代码非常简单：

<iframe width='#{width}' height='#{height}' src='http://www.youtube.com/embed/#{matchdata}?wmode=opaque&autoplay=1' frameborder='0' allowfullscreen></iframe>

【问题讨论】：

所以我还没有“解决”它，但这里有一些提示：问题来自持有 iframe 的 parent 和 parent.parent div 上的 2 -moz-transform 通过有条件地加载 ff11+ & OSX a css with #lightbox .ps-carousel-content { -moz-transform: none !important;} #lightbox .ps-carousel-item { -moz-transform: none !important;} 这个问题被规避了，但解决方案是不太令人满意 - Adobe 的人请修复你的播放器，FF 的人请包括 h264...，youtube 的人请放弃 flash....
已知bug，请投票！！！ - bugzilla.mozilla.org/show_bug.cgi?id=811547
Duopixel 的解决方案是将&html5=1 添加到 YouTube 嵌入 URL。 Firefox supports HTML5 video 回到 3.5 版，所以应该是安全的。

标签： css macos firefox iframe youtube

【解决方案1】：

您在 iframe 上使用什么 CSS 样式？ http://argylesocial.com 在 youtube html5 iframe 上使用了border-radius，删除这些样式声明解决了这个问题。

我必须同时删除 -moz-border-radius 和 border-radius 才能正确显示获取视频。现在像魅力一样工作！

【讨论】：

不是：这是解释 :) ksso.net/~alex/ff_bug/moz-transform.html
@AlexanderCasassovici 链接已损坏

【解决方案2】：

这实际上是一个 FF 错误，现已在 Mozilla 12 /13/14 上修复 http://ksso.net/~alex/ff_bug/moz-transform.html

【讨论】：

【解决方案3】：

我在我正在开发的网站博客上遇到了同样的问题，我为 iframe 添加了高度，因为 Firefox 没有从 iframe 中的高度标签中获取高度，解决方案是使用样式标签添加高度，但如果它是一个响应式网站，使用媒体 css 作为 iframe 标签高度。这个例子可能会更好地解释它。

如果 iframe 使用固定高度，请尝试将样式标记添加到 iframe，如

style="height:374px"

如果响应式站点将 iframe 添加到 css 中的媒体查询中 - 例如：

@media screen and (min-width: 100px) and (max-width:768px) { 
    .video iframe {height:200px}
}

等等。

它对我有用，我希望它也能帮助其他人。

谢谢！

【讨论】：