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..

    show play icon on image hover

    How to use css to put an item just above the top of the screen?

    How to keep the footer docked at the bottom of the page considering following structure? [duplicate]

    How to have elements copy other element's auto height css?

    How can I stop a text link to go up each time it is selected?

    How do I hide the div if the Var is empty?

    How to play a video inside a logo

    How to use CSS to surround a number with a circle?

    How to add fade in and fade out effect in CSS animations no javascript?

    How do I create a CSS class Union?

    How to put those things next to eachother? CSS

    How to display a header inline with paragraph text using divs or an alternative method

    JavaFx: How to get the corresponding stylesheet for a given style class of a Node?

    How can I use an alert or form input to allow a user to set a value of a CSS parameter [closed]

    How to make header background 100% height?

    how to use dialogClass option in jquery dialog with an external CSS file

    How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?

    Hide a partially shown div

    How to set min-height for bootstrap container

    How to create rating system using only css [duplicate]

    how to add a margin on both sides and center the text in a paragraph?

    How to Reset CSS after Media Query?

    How to uncover an image with css and jQuery

    How to increase the size of an unicode icon awesome fonts relative to its container with CSS

    When styling XML with CSS, how to refer to tag names that contain periods or colons?

    “div” into an “a” is wrong. So, how can I do this? (HTML4, CSS2, crossbrowser)

    Color of links not always showing correctly

    How to make image clipping in css

    Using CSS alone, how can you have a Border-bottom gradient from Right to Left?

    How to set background-size to “cover”, plus a little more in CSS?