如何将 wmode=transparent 动态添加到 Youtube 嵌入代码？答案

【问题标题】：How to dynamically add wmode=transparent to Youtube embed code?如何将 wmode=transparent 动态添加到 Youtube 嵌入代码？
【发布时间】：2012-02-07 17:39:51
【问题描述】：

我有几个由客户通过 CMS 添加的 Youtube 视频。我需要将以下内容添加到所有 Youtube src 链接：

?wmode=transparent

我该怎么做？

Youtube嵌入代码示例如下：

<iframe width="515" height="292" src="http://www.youtube.com/embed/p8IB-5PbL9U" frameborder="0" allowfullscreen></iframe>

这样做的原因是因为我有一个 Youtube 视频后面的 javascript 菜单，而且我已经读到这就是你修复它的方法。

客户根本不是技术人员，只是让他们从 Youtube 获取嵌入代码是一件很困难的事情，因此需要动态添加。

【问题讨论】：

需要更多信息：什么 CMS？是否有任何 JavaScript 框架（例如 jQuery、MooTools 或其他）？一个页面上有多少视频？
我喜欢这个答案，不幸的是动态添加参数对我不起作用，我不得不重新使用旧的代码...

标签： javascript youtube embed

【解决方案1】：

如果您只需要在所有帧中添加?wmode=transparent，请使用以下 JS 代码：

window.onload = function() {
    var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        frames[i].src += "?wmode=transparent";
    }
}

【讨论】：

太棒了，效果很好，菜单现在运行良好。谢谢。
这确实像宣传的那样添加了“?wmode=transparent”，但这似乎并没有解决菜单在视频后面的问题。我不得不重新使用旧样式的代码来让 wmode=transparent 工作。
@DrCord 尝试“不透明”而不是“透明”，但我真的不知道这是否真的是你的问题。
@ShadowWizard - 没有修复它，在 Firefox 中，即使添加了任一参数，菜单也会在视频后面下拉。它是动态完成还是直接在链接中完成似乎并不重要。

【解决方案2】：

根据您的 CMS，您可以通过简单的 PHP 来完成此操作，只需将其添加到每个 url 的末尾，或者让 jQuery 为您完成工作。

$('iframe').each(function() {
    $(this).attr("src", $(this).attr("src") + '?wmode=transparent')
});

【讨论】：

哈哈，d'oh，是的，我本可以将它添加到 php 的末尾，我今天过得很愚蠢！我已经选择了上面的惰性选项，因为有很多地方可以添加它，不过还是提高了你的答案，所以谢谢。
这样简单的任务不需要jQuery。纯 JavaScript 将像跨浏览器一样简单。（在这种情况下）
干杯马克，仅供参考 - 请使用@ 通知当有多个人发布 cmets（在这种情况下是 Rob 和我自己 - 不止一个） - 我现在看到你的评论只是偶然.
感谢@ShadowWizard 仍在解决 Stack Overflow 的提示。 ;)
干杯，现在我收到了通知 - 干得好！ :) 顺便说一句，前三个字母就足够了，所以如果你懒得全部输入，甚至点击自动提示，你可以只输入@Sha 或@Shadow，它会安全到达。

【解决方案3】：

您确定要使用 iframe 吗？这使得这变得更加困难，因为您无法直接访问底层对象。如果可以的话，最好直接将对象嵌入到您的页面中

<object width="515" height="292">
<param name="movie" value="http://www.youtube.com/v/p8IB-5PbL9U"></param>
<param name="allowFullScreen" value="true"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/p8IB-5PbL9U"
  type="application/x-shockwave-flash"
  allowfullscreen="true"
  wmode="transparent"
  width="515" height="292">
</embed>
</object>

【讨论】：

不幸的是，我被 iframe 卡住了。
YouTube 已将其主要嵌入切换为 iframe，以允许他们为视频动态选择 Flash 或 HTML5。
当 iframe 没有 ?wmode=transparent 时，这对我有用。