Youtube iframe嵌入式视频无法正常工作(黑屏)

时间:2012-03-22 14:16:11

标签: css macos firefox iframe youtube

在Diveboard上,我们制作了一个很棒的photoswipe黑客支持视频

一切顺利,直到我发现Firefox 11和12测试版没有播放嵌入的YouTube视频...看起来它们已经加载,我们可以听到声音广告没有图像......所以它是youtube radio而不是 你可以在这里看到一个例子:Video example page

我一直在摸着那个但是我一无所知:( :(

编辑:显然这只是OSX上的一个问题!这让我更加无能......

任何暗示都是apreciated

iframe代码非常简单:

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

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

我在我正在开发的网站博客上遇到同样的问题,我为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}
}

等等。

它对我有用,我希望它也能帮助别人。

谢谢!