问题描述:

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").

网友答案:

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.

http://www.w3schools.com/html/html5_video.asp

相关阅读:
Top