在Facebook上嵌入YouTube视频的iframe框架-Z-index问题

Question

我在我的Facebook应用程序中嵌入了一个Youtube视频，但当我向下滚动时，Youtube视频会浮在Facebook菜单栏的上方。看起来很糟糕，见屏幕截图。

乍一看，这个问题只出现在Chrome和Internet Explorer中，而不是Firefox中。这似乎是一个Z-index问题。我尝试在我的Youtube网址中添加&wmode=Opaque，但没有成功。

有人遇到过这个问题吗？如果有，你们是如何解决的？

- samn

Answer 1

问题出现在嵌入的YouTube框架上。您需要将以下内容添加到URL的查询字符串中才能正确工作： wmode=transparent 您会得到类似于这样的东西： www.youtube.com/embed/xxxxxxxxx?wmode=transparent&rel=0 这将修复嵌入式YouTube视频的z索引问题，使其不再覆盖所有其他窗口和模态窗口。

- Mike_K

---

我还没有相关的CSS，但这是我的PHP代码：echo "<object style='height: 317px; width: 520px'><param name='movie' value='http://www.youtube.com/v/".$youtubecode."?version=3&feature=player_detailpage&wmode=transparent'><param name='allowFullScreen' value='true'><param name='allowScriptAccess' value='always'><embed src='http://www.youtube.com/v/".$youtubecode."?version=3&feature=player_detailpage&wmode=transparent' type='application/x-shockwave-flash' allowfullscreen='true' allowScriptAccess='always' width='520' height='317'></object>"; - samn

尽管由于评论中的显示限制我无法阅读链接（如果可以的话会很有帮助），但我不确定这一点，但是根据这个对象符号表示法，看起来你已经将电影值设置为链接，并且另一个实体（参数？）名称为“allowFullScreen”，你是否尝试过相当于创建另一个参数（或者在代码中进行的其他操作，我无法看到）设置名称为“wmode”和值为“transparent”？ - Mike_K

谢谢您的评论，我已经找到了解决方案。确实是与参数?wmode=transparent或opaque有关，但这在对象中不起作用。将对象转换为iframe就可以了。我给你+1的帮助，谢谢！ - samn

Answer 2

$(document).ready(function(){
    var frames = document.getElementsByTagName("iframe");

    for (var i = 0; i < frames.length; i++) {
         frames[i].src += "?wmode=opaque";
    }
});

这段代码对我来说可行。

- Urooj Khan

Answer 3

我认为这是一个新的 Facebook Bug，因为所有视频嵌入突然出现了这种情况。不是海报应该修复或调整的问题。

- Jeff

---

只有在嵌入YouTube视频作为对象时才会出现此问题。当您将视频嵌入为iframe并在嵌入的URL中添加?wmode=transparent时，问题就得到解决了。 - samn