Flash overlapping / wmode Issue

Question

I experience the very known flash / html overlay issue in Google Chrome (16.0.912.75 m) and Safari (5.1.1). As suggested here and here I have set the wmode attribute to transparent - and tried opaque, as well. Unfortunately both didn't do the trick.

I have also added type="application/x-shockwave-flash" like it is suggested here

Here is the code currently responsible for the embedding.

<iframe wmode="transparent" type="application/x-shockwave-flash" 
    width="760" height="427" 
    src="http://www.youtube.com/embed/Xedbog6_3L0?rel=0&hd=1?wmode=transparent" 
    frameborder="0" allowfullscreen=""/> 

Answer 1

First of all, this problem is not reproductive in Safari 5.1.2 and Firefox 9.0.1 (Mac versions). Without knowing your browser, I can only say that since you are using an iframe tag to point a page where Flash is actually embedded, wmode has no effect in your current DOM document, as it is not a valid property of iframe tag (it belongs to embed tag). You'd need to set css property display to block value on the iframe tag in order to to make a browser treat your iframe as a standard layout object. Then, you could set the layer distribution and positioning via CSS.