I am facing an issue with YouTube embedded videos on my website. The problem is that these videos do not follow the z-index rules and are always displayed above all other elements on the page. I have tried:
$('iframe','.video_container').attr('wmode','opaque');
$('iframe','.video_container').attr('z-index','1');
I discovered that changing the wmode to opaque helps, but isn't this method meant for older style embedded videos? How can I apply this to both old embeds and new iframes?
Edit: Even applying the code above did not work for old embedded videos.
$('object','.video_container').append('<param name="wmode" value="opaque"></param>').find("embed").attr('wmode', 'opaque');
This approach seems to work for iframe videos:
var src=$('iframe','.video_container').attr('src');
if(src.indexOf('?')==-1)
{
src=src+'?wmode=transparent';
}
else
{
src=src+'&wmode=transparent';
}
$('iframe','.video_container').attr('src',src);
Unfortunately, I haven't found a solution yet for old embed videos. The following code snippet shows the unsuccessful manipulation using JavaScript:
<object width="320" height="240">
<param name="movie" value="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US&rel=0"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<embed src="http://www.youtube.com/v/-SNytfkJD4U?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"/>
<param name="wmode" value="opaque"/>
</object>