มีใครทราบวิธีปรับขนาดโปสเตอร์วิดีโอ 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%;
}