9

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.

Rob
  • 6,304
  • 24
  • 83
  • 189
  • 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 Jan 11 '12 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 code... – DrCord Nov 12 '13 at 16:39

3 Answers3

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";
    }
}
Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
  • Brilliant, that works great, the menu is working perfectly now. Thanks. – Rob Jan 11 '12 at 11:23
  • This does add "?wmode=transparent" as advertised, but that didn't seem to fix the problem of the menus going behind the video. I had to go back to using the old style code to get wmode=transparent to work. – DrCord Nov 12 '13 at 16:33
  • @DrCord try "opaque" instead of "transparent" but I really can't tell if that's really the problem in your case. – Shadow The GPT Wizard Nov 12 '13 at 18:54
  • @ShadowWizard - that did not fix it, in Firefox the menu drops down behind the video even with either parameter added. It doesn't seem to matter if it done dynamically or directly in the link. – DrCord Nov 12 '13 at 21:19
5

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>
jordancpaul
  • 2,954
  • 1
  • 18
  • 27
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')
});
MarkSmits
  • 538
  • 2
  • 7
  • Haha, d'oh, yep I could've just added it to the end of the php, I'm having a stupid day! I've gone for the lazy option above as there's quite a lot of places to add it, upped your answer though so thanks. – Rob Jan 11 '12 at 11:25
  • No need for jQuery for such simple task. Pure JavaScript will be as simple and as cross browser. (in this case) – Shadow The GPT Wizard Jan 11 '12 at 11:26
  • Cheers Mark, FYI - please use `@` to notify when there is more than one person posting comments (in this case Rob and myself - more than one) - I saw your comment now only by chance. – Shadow The GPT Wizard Jan 11 '12 at 12:16
  • Thanks for the tip @ShadowWizard still figuring out Stack Overflow. ;) – MarkSmits Jan 11 '12 at 13:29
  • Cheers, now I got notification - well done! :) By the way, first three letter are enough so if you're too lazy to type it all or even click on the auto suggest, you can just have `@Sha` or `@Shadow` and it will arrive safely. – Shadow The GPT Wizard Jan 11 '12 at 13:31