javascript - How to dynamically add wmode=transparent to Youtube embed code? - Stack Overflow

admin管理员组

文章数量:1203198

I have several Youtube videos that are added through a CMS by a client. I need to add the following to all Youtube src links:

?wmode=transparent

How would I do that?

An example of the Youtube embed code is as follows:

<iframe width="515" height="292" src="" frameborder="0" allowfullscreen></iframe>

The reason for doing this is because I have a javascript menu that is going behind a Youtube video and I've read that this is how you fix it.

The client isn't technical at all and just having them get the embed code from Youtube is a struggle, so it needs to be added dynamically.

I have several Youtube videos that are added through a CMS by a client. I need to add the following to all Youtube src links:

?wmode=transparent

How would I do that?

An example of the Youtube embed code is as follows:

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

The reason for doing this is because I have a javascript menu that is going behind a Youtube video and I've read that this is how you fix it.

The client isn't technical at all and just having them get the embed code from Youtube is a struggle, so it needs to be added dynamically.

• javascript
• youtube
• embed

Share Improve this question Follow edited Jan 11, 2012 at 11:06 Rob asked Jan 11, 2012 at 10:53 RobRob 6,3702525 gold badges9090 silver badges194194 bronze badges 2

• Need a little more info: What CMS? Is there any JavaScript frameworks (e.g. jQuery, MooTools or other)? How much videos are on a single page? – Oleksandr Skrypnyk Commented Jan 11, 2012 at 11:14
• I like this answer, unfortunately adding the parameter dynamically didn't work for me, I had to go back to using the older <embed> code... – DrCord Commented Nov 12, 2013 at 16:39

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 11

If you just need to add ?wmode=transparent to all the frames, have this JS code:

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

Are you fixed on using the iframe? It makes this a lot more difficult as you are unable to access the underlying object directly. If you can, it would be better to directly embed the object on your page as such

<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>

Depending on your CMS you could do this through plain PHP, by just adding it at the end of each url, or your or make jQuery do the work for you.

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

本文标签： javascriptHow to dynamically add wmodetransparent to Youtube embed codeStack Overflow