Is it possible to place something in front of iframe?

Question

I'm embedding YouTube videos on the page and they appear over drop down menus, over lightbox, etc. I'd rather not use the old YouTube embed code but stupid iframe is obnoxiously putting itself over every other element on the page. Is it possible to make it learn its place?

Answer 1

final update

Adding ?wmode=transparent at the end of the iframe url or &wmode=transparent if there are other params passed as well, seems to fix the issue for all browsers.

---

original answer

Use z-index combined with positioning (relative or absolute)

example with dropdown over a youtube video (new code) at http://jsfiddle.net/gaby/BS4Ww/3/

---

update

added div over iframe as well as i misunderstood the dropdown

Answer 2

You can float both the iframe and whatever you want on top of it inside of a container.

Then, on the items you want on top, just set a negative top margin.

Here's a jsfiddle to show what I mean.

You can also use absolute positioning on the items you want in front, but that typically results in other issues with the site.

update

It appears you are trying to go against regular HTML flow. Things that come first in the HTML are generally "under" or before things that come after.

However, you can take an element out of the regular flow of HTML rendering and position it absolutely.

I've updated the jsfiddle to show how this is done. Be warned, absolute position could bring other issues into your site design.