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. 开发者_StackOverflow中文版Is it possible to make it learn its place?

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

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.

Try setting the z-index on the frame.

z-index

you can use margin-top:12px; or something inside your tag.

If you put the iFrame in a div, and set a z-index on the div, this should work. I do this all the time at work.

for one project I needed similar thing. I intended to display iframe content but not allow user to follow its links. Instead I wanted to point user to another url. Here is my solution. To work in IE is important to set some background color for over element.

 #over{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color:white; /* for unknow reason is color important for IE*/
        opacity:0;
        filter:alpha(opacity=0);    
    }

    iframe{
        width: 100%;
        height: 550px;
    }

    <div>
        <div id="over" onclick="parent.location='....'"></div>
        <iframe src="...">You don't have iframe support, unfortunately</iframe>         
   </div>