Does anyone know how to resize the HTML5 video poster such that it fits the exact dimensions of the video itself?
here's a jsfiddle which shows the problem: http://jsfiddle.net/zPacg/7/
here's that 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;
}
Notice that the orange rectangle doesn't scale to the red border of the video.
Also, just adding the CSS below doesn't work either as it rescales the video along with the poster:
video[poster]{
height:100%;
width:100%;
}
poster
in the link you sent. Can you show me what the CSS looks like for what you are talking about, i.e., "-webkit media style
"? thanks