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

Posted

技术标签:

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

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

?wmode=transparent

我该怎么做?

Youtube嵌入代码示例如下:

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

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

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

【问题讨论】:

需要更多信息:什么 CMS?是否有任何 JavaScript 框架(例如 jQuery、MooTools 或其他)?一个页面上有多少视频? 我喜欢这个答案,不幸的是动态添加参数对我不起作用,我不得不重新使用旧的 代码... 【参考方案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  >
<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"
   >
</embed>
</object>

【讨论】:

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

以上是关于如何将 wmode=transparent 动态添加到 Youtube 嵌入代码?的主要内容,如果未能解决你的问题,请参考以下文章

如何为每个 Flash 对象添加 wmode="transparent" 并嵌入标签?

如何为 youtube 添加 wmode="opaque" 或 wmode="transparent" 到这个 php 片段? [复制]

对网页上的嵌入对象使用 wmode="transparent"、"opaque" 或 "window" 之间的区别

flash wmode参数详解

flash z-index 问题

俯视闪光物体