0

I have an iframe of containing an embedded Youku video, and it's not obeying the z-index set in IE and going on top of everything. With YouTube videos, I was able to fix this by setting a wmode parameter to transparent or opaque, but doing the same with the Youku video doesn't work.

<iframe width="720" height="405" src="http://player.youku.com/embed/[VIDEOCODE]?rel=0&wmode=opaque" frameborder=0 allowfullscreen></iframe>

Any ideas of how to fix this?

dayuloli
  • 13,791
  • 13
  • 58
  • 103

1 Answers1

1

I ran into the same problem with a fancybox plugin I installed on pages that contained Youtube and Youku videos. For Youtube videos you can do ?wmode=opaque or &wmode=opaque at the end of the src url of the video. You use the &wmode=opaque when a ? (aka a query parameter) has already been used in the src url.

Youku apparently doesn't do this. But the real problem is that both of these videos are Flash based plugins. Flash does not play well with your z-index and occasionally requires you to put it back in its place. So the below solution should work for any flash based plugin and not just Youku videos:

insert a <param name="wmode" value="transparent"> prior to your embed (I know you grabbed the iframe code from Youku but if you look closely they have a HTML friendly code that uses embed) and in the embed code given insert wmode="transparent" prior to > of your opening embed.

<div> <param name="wmode" value="transparent"> <embed src="http://player.youku.com/player.php/sid/XNzQxMjA3ODg0/v.swf" allowFullScreen="true" quality="high" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" wmode="transparent"></embed> </div>

I've tested this in IE8 and up. Works beautifully.

LFMB
  • 11
  • 2