How to dynamically add wmode=transparent to Youtub

问题:

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.

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

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

回答3:

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')
});