Geek Answers Handbook

Is it possible to place something in front of an iframe?

I embed YouTube videos on the page and they appear above the drop-down menus, above the lightbox, etc. I would prefer not to use the old code for embedding YouTube, but the stupid iframe unobtrusively puts itself on top of any other element on the page. Is it possible for it to learn its place?

+4
source share
6 answers

You can float both iframes and whatever you want on top of the container.

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

Here's jsfiddle to show what I mean.

You can also use absolute positioning on elements that you want to see in front, but usually this leads to other problems with the site.

Update

You seem to be trying to go against a regular HTML stream. Things that appear first in HTML are usually “under” or before what happens after.

However, you can take an element from a regular HTML rendering stream and place it absolutely.

I updated jsfiddle to show how this is done. Be careful, the absolute position may lead to other problems in your site design.

+4
source

final update

Adding ?wmode=transparent to the end of the iframe url or &wmode=transparent , if there are other parameters passed, seems to fix the problem for all browsers.

original answer

Use z-index in combination with positioning (relative or absolute)

Example

with a drop-down list on a YouTube video (new code) at http://jsfiddle.net/gaby/BS4Ww/3/

Update

added a div over the iframe , and also I misunderstood the dropdown

+5
source

Try setting the z-index in the frame.

z-index

+1
source

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

0
source

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

0
source

for one project I needed a similar thing. I intended to display the contents of the iframe, but did not allow the user to follow its links. Instead, I wanted to point the user to a different URL. Here is my solution. To work in IE, it is important to set some background color for a more 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>
0
source

More articles:


All Articles