Youtube's iframe embeds cover up html elements

Question

i've been working on a toolbar at the top of my sample website:

http://theplagueround.com/dev/

but it gets hidden behind any youtube video content. i've seen a post or two about adding parameters to the tag, but youtube is also using iframes now so that doesn't apply.

Answer 1

You may want to try my plugin for Youtube (4000+ downloads so far): Youtube shortcode

No design issues have been reported.

Answer 2

To have a Youtube video appear behind your toolbar, you should add the parameter wmode=transparent to the end of the URL.

So change this:

<iframe width="425" height="349" 
    src="http://www.youtube.com/embed/H1Opn4DS88k" 
    frameborder="0" allowfullscreen></iframe>

to this:

<iframe width="425" height="349" 
    src="http://www.youtube.com/embed/H1Opn4DS88k?wmode=transparent"     
    frameborder="0" allowfullscreen></iframe>

More here:

• http://www.brandondawson.org/web-design/new-youtube-iframe-embed-code-wmodetransparent

If you don't want to hardcode the HTML into your posts, you should use a plugin like the one provided by @Tubal Martin. This has the advantage that if Youtube update their embed code in the future, you should only need to upgrade the plugin to the latest version.