CODEWITHSUNDEEP
htmlcss
A-OK
A-OK

Reputation: 3254

Is it possible to place something in front of iframe?

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?

Upvotes: 4

Views: 16909

Answers (6)

Jaroslav Kubacek
Jaroslav Kubacek

Reputation: 1447

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>

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

final update

Adding ?wmode=transparent at the end of the iframe url or &amp;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

Upvotes: 5

rockerest
rockerest

Reputation: 10518

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.

Upvotes: 4

Christopher Roy
Christopher Roy

Reputation: 306

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.

Upvotes: 0

Trevor
Trevor

Reputation: 21

Try setting the z-index on the frame.

z-index

Upvotes: 1

Anish
Anish

Reputation: 2927

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

Upvotes: 0

Related Questions