26

As it stands right now, this is only tested in WebKit.

When a poster image is set on a <video> element using the poster attribute, this image displays before the user plays the video (default behavior). However, if the poster image is of a different aspect ratio than that of the <video> element that it is set on, whitespace (or possibly blackspace) is seen on either side of the image (left and right or top and bottom) and the image is centered (also, default behavior).

I would like to know how to scale this image up (preferably in CSS) so that it fills the video element, similar to using the CSS3 background-size: cover; value.

Still confused? Perhaps this JSFiddle will help explain: http://jsfiddle.net/jonnymilano/2w2CE/

I would also be interested in answers that forced the image into the video container, warping its height and/or width to fit the dimensions of the video container. However, this answer would only partially solve my issue.

jonathanbell
  • 2,507
  • 5
  • 23
  • 40

1 Answers1

57

This question got me thinking and your jsfiddle was useful in solving this (albeit not for IE as it doesn't implement the poster image correctly).

Basically combine what you posted, set the required poster image as the background image of the video element and specify a 2x2 transparent image as the actual poster image.

e.g.

<video controls poster="transparent.png"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

and

video { 
   width:305px; 
   height:160px;  
   background:transparent url('poster.jpg') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
}

I wrote a bit more about it at HTML5 Video and Background Images.

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73
  • Thank you so much for taking the time to post this. Your solution works very well! :) Sorry, I didn't know that this had already been asked on SO. I did do a search. – jonathanbell Mar 20 '13 at 17:41
  • You're welcome. Yeah it's not always easy to find that questions have been already posted. – Ian Devlin Mar 21 '13 at 07:49
  • This doesn't appear to work on IE 10. I get a black box instead of the background image. – Kyle Trauberman Oct 09 '13 at 22:55
  • In the article I linked to I state exactly that, IE doesn't implement the poster attribute correctly so it doesn't work. – Ian Devlin Oct 13 '13 at 09:03
  • I see no reason why it wouldn't be possible Deepanshu. – Ian Devlin Jul 01 '15 at 06:44
  • 1
    how to make the poster image show again when the video ends? – zok Dec 04 '15 at 11:03
  • 2
    Add a data transparent gif instead of another request : "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" – Ian Warner Jan 22 '17 at 15:28
  • It would be nice just to see the very first image of the video instead of using a placeholder (poster). Resizing would have ben done then too. – Jonny Nov 04 '18 at 18:41