누구든지 동영상 자체의 정확한 크기에 맞도록 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%;
}