Blog » Stop YouTube Videos from Hiding Your Menus – Two Methods

Stop YouTube Videos from Hiding Your Menus – Two Methods

image

Has putting YouTube videos on your website embarrassed you by being so bold as to insist on being in front of other elements on your website? This is a common problem seen across the Internet daily. However, just ‘cause main people suffer from this ailment doesn’t mean that you have to. The resolution to this problem doesn’t rely on setting Z-Index or anything fancy, just making some small changes to the original code provided by YouTube to embed the video.

The preferred method these days for embedding a video appears to be to <iframe> in the video. This is clean, simple, and more importantly, won’t get stripped out like the embed code or javascript embeds by most WYSIWYG editors that people use online to edit their content. A normal IFrame call would look like this:

<iframe width="200" height="200" src="http://www.youtube.com/embed/FOpoARz3k1I" 
frameborder="0"></iframe>

while the corrected HTML code would look like the following:

<iframe width="200" height="200"
 src="http://www.youtube.com/embed/FOpoARz3k1I?wmode=transparent" frameborder="0">
</iframe>

With the inclusion of 18 characters, you’ve solved  a big problem. And who said the keyboard isn’t mightier than the sword? Hmmm… nobody I’d guess.
image

But if you are screaming at your monitor now “Hey, I use Object tags rather than Iframe. What about me?” I have the solution. It is going to entail setting the wmode=transparent again but this time, it will involve a little more work. Here is a sample embed snippet from Google:

<object width="560" height="349">
    <param name="movie" 
value="http://www.youtube.com/v/FOpoARz3k1I?version=3&amp;hl=en_US"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src=http://www.youtube.com/v/FOpoARz3k1I?version=3&amp;hl=en_US 
type="application/x-shockwave-flash" width="560" height="349" 
allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

whereas the corrected code would look like this:

<object width="560" height="349">
    <param name="WMode" value="transparent"></param>
    <param name="movie" 
value="http://www.youtube.com/v/FOpoARz3k1I?version=3&amp;hl=en_US"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src=http://www.youtube.com/v/FOpoARz3k1I?version=3&amp;hl=en_US 
wmode="transparent" type="application/x-shockwave-flash" width="560" height="349" 
allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Note the include of the <param name=”WMode” value=”transparent”></param> after the opening <object> tag and the inclusion of the wmode=”transparent” parameter/value in the <embed> tag. This is the secret sauce to help hold YouTube videos at bay so they don’t take over the universe… Ok, at least they won’t take over your site.

Got any other, better ways to address this? Please feel free to leave a LEGITIMATE comment using the form below. As always, Spammers Need Not ApplySM.

Michael Gibbs
Stalk Me...
Latest posts by Michael Gibbs (see all)