z-index and iFrames!

html iframe z-index
cqde picture cqde · Mar 12, 2011 · Viewed 67.5k times · Source

I'm using the FancyBox plugin for some of my site's images. On one of my pages, I also have the embedded iFrame code from YouTube to place a video on the page.

On this same page is a thumbnail that, when clicked, FancyBoxes the image. However, the embedded YouTube video still lays over the FancyBox image. I did a bit of z-index experimenting and still no luck.

Does an iFrame have seniority over all elements in a page even with z-index set, etc.?

Answer

Simonini picture Simonini · Jul 17, 2011

Add wmode=transparent as param.

Html solution

<iframe title="YouTube video player" 
width="480" height="390" 
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" 
frameborder="0"
>

jQuery solution: 

$(document).ready(function () {
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Source http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix

Related questions

How to apply CSS to iframe?

I have a simple page that has some iframe sections (to display RSS links). How can I apply the same CSS format from the main page to the page displayed in the iframe?

Read More
Make iframe automatically adjust height according to the contents without using scrollbar?

For example: <iframe name="Stack" src="http://stackoverflow.com/" width="740" frameborder="0" scrolling="no" id="iframe"> ... </iframe> I want it to be able to adjust its height according to the contents inside it, without using scroll.

Read More
Remove border from IFrame

How would I remove the border from an iframe embedded in my web app? An example of the iframe is: <iframe src="myURL" width="300" height="300">Browser not compatible.</iframe> I would like the transition from the …

Read More