ビデオ自体の正確なサイズに合うようにHTML5ビデオポスターのサイズを変更する方法を知っている人はいますか?
ここに問題を示すjsfiddleがあります:http ://jsfiddle.net/zPacg/7/
これがそのコードです:
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;
}
オレンジの長方形は、ビデオの赤い枠に合わせて拡大縮小されていないことに注意してください。
また、以下のCSSを追加するだけでは、ポスターとともにビデオのサイズが変更されるため、機能しません。
video[poster]{
height:100%;
width:100%;
}