css: youtube positioning issue with ie7!

i'm wrapping a youtube video inside of a div.vidwrapper. I don't want the video to be visible but just the controls. This works fine in all Browsers but not in IE7. I have no clue what i have to do to position the video inside ov my .vidwrapper div in IE7.

html

<div class="vidwrapper">
   <object class="video" width="308" height="100">
   <embed src="http://www.youtube.com/watch?v=1QP-SIW6iKY" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="308" height="100" wmode="opaque"></embed>
   </object>
</div>

css

/*VIDEO*/
.vidwrapper {
    width:308px;
    height:25px;
    overflow:hidden;
    position:relative;
}
.video {
    bottom:0px;
    position:absolute;
}

Here is an example http://jsfiddle.net/3n3C7/ Check this out in any modern browser and then check it out in IE7. I want onl开发者_开发知识库y the controls to be visible in IE7.

Any idea how i could make that happen?

Try to use _height:21px; this should work.As i am not on Windows so this is probably my guess, but it works most of the time.

What about this?

 <iframe title="YouTube video player" width="480" height="25" src="http://www.youtube.com/embed/riW4W66ptqI" frameborder="0" allowfullscreen></iframe>