CODEWITHSUNDEEP
htmlwordpressyoutube
helgatheviking
helgatheviking

Reputation: 26319

Youtube's iframe embeds cover up html elements

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.

Upvotes: 1

Views: 1704

Answers (2)

Ciaran
Ciaran

Reputation: 1904

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:

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.

Upvotes: 1

Tubal Martin
Tubal Martin

Reputation: 41

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

No design issues have been reported.

Upvotes: 4

Related Questions