Youtube 视频从 iframe 转到顶部答案

【问题标题】：Youtube video goes to top from an IframeYoutube 视频从 iframe 转到顶部
【发布时间】：2011-04-27 13:49:18
【问题描述】：

我有一个带有 iframe 的页面，显示覆盖整个页面的外部网站，顶部有一个包含一些内容的 div，类似于谷歌图像新界面。如果 iframe 中包含的页面中有一个 youtube 视频，它会覆盖主页中的内容，因为 iframe 中的页面来自外部网站，因此无法在其上设置 wmode 透明。

有没有办法控制 iframe 内的 flash 分层？

谢谢

朱塞佩

【问题讨论】：

标签： html z-index flash wmode

【解决方案1】：

既然你已经发布了很长一段时间的问题，我想知道你是否知道答案。

无论如何，您可以尝试使用 javascript 更改 wmode（使用 jquery 会简单得多，;)）

试试这个代码：

if ($('embed').length){
    $('embed').attr('wmode', 'transparent').wrap('<div>');
}

或者如果它无法识别 iframe 中的嵌入对象，您可以尝试：

if ($('iframe embed', parent.document).length){
    $('iframe embed', parent.document).attr('wmode', 'transparent').wrap('<div>');
}

【讨论】：

【解决方案2】：

您只需要像这样更改 iframe 的 src 值：

$('iframe').each(function() {
    var fixed_src = $(this).attr('src') + '&amp;wmode=transparent';
    $(this).attr('src', fixed_src);
});

*注意：这是特定于 YouTube 的 iframe 嵌入代码的。

【讨论】：

如果 iframe 源代码中没有其他 get 参数，这将无法正常工作，因此您需要首先检查 $(this).attr('src') 是否包含“？ "如果没有，那么您应该在“wmode=transparent”前加上“？”而不是“&”。

【解决方案3】：

只需在 YouTube 嵌入式 iframe src 属性的末尾添加 &wmode=transparent。您可以稍后使用 jQuery 更改 src，但为什么让页面加载错误的内容，然后更改它以重新加载正确的内容？只需编辑 HTML。

【讨论】：

【解决方案4】：

添加一个?，而不是&。 "?wmode=transparent" 例如：

<iframe width="697" height="400" src="http://www.youtube.com/embed/IgvDkflXVuw?wmode=transparent" frameborder="0" allowfullscreen></iframe>

【讨论】：

【解决方案5】：

只需将 id 连同其余属性一起添加到您的 iframe 中，如下所示

<iframe id="ytplayer" width="697" height="400" src="http://www.youtube.com/embed/IgvDkflXVuw?wmode=transparent" allowfullscreen="" type="text/html" wmode="Opaque"  frameborder="0" wmode="Opaque"></iframe>`

【讨论】：