facebook 上 iframe 中的 Youtube - Z-index 问题

Posted 2023-02-24

【中文标题】facebook 上 iframe 中的 Youtube - Z-index 问题

【英文标题】：Youtube in iframe on facebook - Z-index issue

【发布时间】：2012-02-28 01:29:01

【问题描述】：

我在我的 Facebook 应用程序中嵌入了一个 Youtube 视频，但是当我向下滚动时，该 youtube 视频漂浮在 facebook 菜单栏上方。看起来有点糟糕，请看截图。

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

其他人有这个问题吗？如果有，你是怎么解决的？

【参考方案1】：

问题出在嵌入式 youtube 框架上。您需要将其添加到 url 的查询字符串中才能正常工作：

wmode=透明

你会得到这样的东西：

www.youtube.com/embed/xxxxxxxxx?wmode=transparent&rel=0

这将解决嵌入式 youtube 视频位于所有其他窗口和模式之上的 z 索引问题。

【讨论】：

我还没有任何相关的 css，但这是我的 php 代码： echo "";

即使由于 cmets 中的显示限制而无法阅读链接（如果可以的话，这将很有帮助），我对此不是 100% 确定，但使用此对象表示法，它看起来像因为你有电影价值=链接，另一个实体（参数？）名称='allowFullScreen'，你是否尝试过相当于将另一个参数（或我看不到的代码中发生的任何事情）设置为名称= 'wmode' 和 value='transparent'？

感谢您的评论，我已经找到了解决方案。它确实与参数 ?wmode=transparent 或 opaque 一起使用，但这不适用于对象。将对象转换为 iframe 就可以了。我给你 +1 的帮助，谢谢！

【参考方案2】：

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

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

此代码对我有用。

【参考方案3】：

我认为这是一个新的 facebook 错误，因为它突然发生在所有视频嵌入中。不是海报必须修复或调整的东西。

【讨论】：

仅当 youtube 视频作为对象嵌入时才会发生。当您将视频作为 iframe 嵌入并将 ?wmode=transparent 添加到嵌入的 url 时，它是固定的。