How to dynamically add wmode=transparent to Youtube embed code?

Question

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.

Answer 1

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";
    }
}

Answer 2

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>