Menu
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%; } 
816
If all you want is really to avoid the width/height to return to defaults (300 x 150) when the next video is loading, you just have to set your <video> 's width and height properties to the ones of the loaded video ( videoWidth and videoHeight are the real values of the media, not the ones of the element).
HTML Video Tags All you need to do is set the width to 100% and the height to auto. This will create a video that fills the entire parent and its height will be calculated automatically based on the width so that it maintains its current aspect ratio no matter the screen size.
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
Depending on what browsers you're targeting, you could go for the object-fit property to solve this:
object-fit: cover; or maybe fill is what you're looking for. Still under consideration for IE.
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
