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
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:
<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" />
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
unwrap() - no success, sorry I am "green").
You could try using the HTML5 video tag.
<video id="video" width="521px" height="427px" controls="controls" preload="auto"> <source src="http://www.youtube.com/v/sP5ntTD2ta0" /> </video>
This makes styling the element, along with other div's that you place untop of it way easier.