Make HTML5 video poster be same size as video itself

Question

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: ```

``` 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%; } ```

Accepted Answer

You can use a transparent poster image in combination with a CSS background image to achieve this (example); however, to have a background stretched to the height and the width of a video, you'll have to use an absolutely positioned `<img>` tag (example).

It is also possible to set `background-size` to `100% 100%` in browsers that support `background-size` (example).

Update

A better way to do this would be to use the `object-fit` CSS property as @Lars Ericsson suggests.

Use

```
object-fit: cover;
```

if you don't want to display those parts of the image that don't fit the video's aspect ratio, and

```
object-fit: fill;
```

to stretch the image to fit your video's aspect ratio

Example

Make HTML5 video poster be same size as video itself

Solution

Problem

Related problems