如何将 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”,但这似乎并没有解决菜单在视频后面的问题。我不得不重新使用旧样式的 @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 片段? [复制]