I have the page with YouTube video (object - not iframe) and need to add the image over it. All works fine in Chrome, but in IE the image is below the YouTube player. So I searched for the info and found that for IE I need to add param wmode="opaque"
inside the youtube's <object>
.
For some reason, I can't add that parameter right into HTML, I need to do it after the page is rendered. So I am doing this:
Example page after rendering:
<span class="video">
<object type="application/x-shockwave-flash" style="width:521px; height:427px;" data="http://www.youtube.com/v/sP5ntTD2ta0">
<param name="movie" value="http://www.youtube.com/v/sP5ntTD2ta0" />
</object>
</span>
I am adding this after document is loaded:
$('.video object').append('<param name="wmode" value="opaque"/>');
But the image in IE is still below the YouTube player.
I think that I need somehow to re-render the page, but how? (I've already tried to use wrap()
, unwrap()
- no success, sorry I am "green").