How to fill video element with poster image even if the poster image is a different aspect ratio than its video element? [duplicate]


Tags: html5,css3,html5-video

Problem :

This question already has an answer here:

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.



Solution :

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.


    CSS Howto..

    How to Write an Angular directive to update CSS class based on form validation

    How to include SASS files and CSS files into version repository and developement cycle

    How do I create a class hierarcy in CSS for MVC4 Razor?

    Bootstrap How to make a responsive grid degradating in two steps?

    how to make a double hover effect with css

    How to wrap content around an image with CSS?

    How to have menu items streched in full width menu with css for any screen automatically

    How to apply a complex style to the selection of a Select2 component?

    Rails How to include a scss file in a specific erb view? [duplicate]

    How do I tell CSS to recalculate :first-of-type after DOM dynamically changes?

    How to put
      around image in css

    How to check a website in BlackBerry Simulator

    how to change the cssclass of a div after press a button in asp.net c#?

    How to disable google translator plug in and set margin-top: to 0px for body element?

    Php - Javascript - How do I know which pages are in color and which are in black and white?

    how to center text vertically in html using css only

    Whats a good way to show large background images on css

    How to align 3 child div in a parent div

    HTML5 CSS (How to on hover image ignore transparent)

    How to add incremental values to a css attribute with Jquery

    how to display three text fields on one line

    How to get a style attribute from a CSS class by javascript/jQuery?

    How to use “currentColor” CSS 3 keyword in LESS?

    How do I get this HTML canvas animation to appear on top of my image?

    How to make images autoscale regardless of height (like on tumblr blogs)

    How to decode base64-encoded font information?

    How to asynchronously load CSS using jQuery?

    How to set
  • Backgound color?
  • How can I determine the escape sequence for characters in an icon font?

    How to stop an image shrinking on responsive site whilst also keeping it centred