Weiß jemand, wie man die Größe des HTML5-Videoposters so ändert, dass es genau zu den Abmessungen des Videos passt?

Hier ist eine jsfiddle, die das Problem zeigt:http://jsfiddle.net/zPacg/7/

Hier ist der Code:

HTML:

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>​

CSS:

video{
border:1px solid red;
}​

Beachten Sie, dass das orangefarbene Rechteck nicht am roten Rand des Videos skaliert.

Das Hinzufügen des folgenden CSS funktioniert auch nicht, da das Video zusammen mit dem Poster neu skaliert wird:

video[poster]{
height:100%;
width:100%;
}