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:

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

i don't think you can use "%" in attributes; however changing it to 100 doesn't fix the issue. i'll betcha its a -webkit media style. feel free to pick through them http://trac.webkit.org/browser/trunk/Source/WebCore/css/mediaControls.css — albert, May 31 '12 at 04:29
@albert, thanks I don't any see references to `poster` in the link you sent. Can you show me what the CSS looks like for what you are talking about, i.e., "`-webkit media style`"? thanks — tim peterson, May 31 '12 at 04:36
well that's what i meant by "picking"; those are chrome specific media styles; i'm only vaguely familiar with them, let alone the pseudo selectors they are declaring; with no starting point: i'd go through looking for declarations with padding, etc. — albert, May 31 '12 at 04:51

score 104 · Answer 1 · answered Jun 25 '15 at 07:43

104

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.

answered Jun 25 '15 at 07:43

Lars Ericsson

1,059
2
7
4

3

This is definitely the answer. – cilphex Mar 25 '16 at 14:55
2

+1 for the link to the [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property, using `object-fit: initial` did it for me. – FireBrand Apr 19 '16 at 09:38
"object-fit: fill" did the trick! as did "object-fit: initial" (oddly, because I don't see an "initial" value in the spec at https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). Both "cover" and "contain" distorted the poster on-play in the Samsung native browser under android 5.1.1. And is doesn't affect IE! – plugincontainer May 08 '18 at 16:12
2

What css selector did you guys target for the object-fit rule? Since there is no way to target the poster image, i assume you used `video{object-fit: cover;}`? – zıəs uɐɟəʇs Dec 17 '18 at 14:42
2

@zıəs uɐɟəʇs In my css it's... video[poster]{object-fit:fill} – plugincontainer Feb 06 '19 at 08:30
If `fit` better than `inherit` across devices? – Khom Nazid Sep 11 '19 at 16:16

score 76 · Accepted Answer · edited Jun 20 '20 at 09:12

76

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 01 '12 at 15:27

user2428118

7,935
4
45
72

-@user1419007, your example repeats the background image. Since you suggest this isn't the best way, would you mind providing a jsfiddle demonstrating how to implement your 2nd strategy? – tim peterson Jun 01 '12 at 16:41
I've `no-repeat`ed the background image. As for the other solution, give me a moment to work this out. – user2428118 Jun 01 '12 at 16:43
Edit: added example for the second proposed solution. – user2428118 Jun 01 '12 at 16:49
thanks for that, we need some javascript to change the `z-index` of the image such that video is visible when you start playing it. – tim peterson Jun 01 '12 at 16:53
2

.. the second example didnt work in chrome ? you do need to give the outer div a position like http://jsfiddle.net/xh8er/ ; then it works. – commonpike Mar 17 '14 at 12:13
See Lars Ericsson answer below, It works better than this. – plugincontainer Feb 06 '19 at 08:35
This only works if you have a defined height for the video. This doesn't work responsively – Worm Sep 03 '20 at 08:09
2

using this solution stretches the video breaking the aspect ratio in fullscreen mode. – Tengiz Nov 12 '20 at 00:53
Very helpful answer. Thanks. – Ibra Feb 03 '21 at 06:58

vkjgr · Answer 3 · 2015-03-13T14:35:33.773

27

Or you can use simply preload="none" attribute to make VIDEO background visible. And you can use background-size: cover; here.

 video {
   background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
 }

 <video preload="none" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 </video>

edited Mar 13 '15 at 14:35

answered Jan 16 '15 at 10:18

vkjgr

4,338
1
26
19

2

better answer. doesn't break anything, and not preloading a video doesn't really hurt your page unless it's a video centric site. +1. – totallyNotLizards Nov 09 '15 at 17:41
1

I had on-play background resize on mobiles. From other questions/answers here (e.g. https://stackoverflow.com/questions/18229974/video-js-poster-image-cover-contain) seems the problem is duplication of images (the player css background and the video element poster). This fix worked. – plugincontainer Sep 10 '16 at 11:15
1

Hmm... worked in Chrome but created a new issue in the native Android browser. See: https://stackoverflow.com/questions/39546792/a-cross-browser-fix-for-video-background-image-issues-on-android – plugincontainer Sep 17 '16 at 12:27
Fixed at last - see Lars Ericsson answer below – plugincontainer May 08 '18 at 16:31

score 27 · Answer 4 · answered Nov 20 '15 at 03:56

27

I was playing around with this and tried all solutions, eventually the solution I went with was a suggestion from Google Chrome's Inspector. If you add this to your CSS it worked for me:

video{
   object-fit: inherit;
}

answered Nov 20 '15 at 03:56

patrick

11,519
8
71
80

Thank you! This was the exact fix I was looking for to REMOVE the video gap on the top and bottom – cpcdev Jan 29 '16 at 20:20

score 13 · Answer 5 · answered Mar 16 '16 at 12:04

13

My solution combines user2428118 and Veiko Jääger's answers, allowing for preloading but without requiring a separate transparent image. We use a base64 encoded 1px transparent image instead.

<style type="text/css" >
    video{
        background: transparent url("poster.jpg") 50% 50% / cover no-repeat ;
    }
</style>
<video controls poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" >
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

answered Mar 16 '16 at 12:04

Jamie G

1,653
3
20
43

Does it only have to be the image name or the complete path? – Aug 30 '17 at 09:33
In the android native browser (the browser is named "Internet") on my samsung the poster resized... catastrophically on-play. This solution - a transparent gif as poster and the "poster" as a background - solved that, BUT,.. now the poster does not display in IE-9, 10 or 11. – plugincontainer May 03 '18 at 05:03
1

Solution was to abandon the transparent gif and poster-as-background and use (see Lars Ericsson answer above) video[poster] {object-fit: fill}. Solved problem on Samsung native browser under android 5.1.1. and IE displays poster with no problems – plugincontainer May 08 '18 at 16:16
This approach is better especially for mobile. `object-fit` does not prevent the wild size distortions of the `poster` that happen on Android while content is still loading. – HolyResistance Jun 16 '20 at 23:00

score 8 · Answer 6 · answered Nov 17 '17 at 20:34

<video src="videofile.webm" poster="posterimage.jpg" controls preload="metadata">
    Sorry, your browser doesn't support embedded videos.
</video>

Cover

video{
   object-fit: cover; /*to cover all the box*/
}

Fill

video{
   object-fit: fill; /*to add black content at top and bottom*/
   object-position: 0 -14px; /* to center our image*/
}

Note that the video controls are over our image, so our image is not completly showed. If you are using object-fit cover, edit your image on a visual app as photoshop and add a margin bottom content.

score 6 · Answer 7 · answered Mar 15 '13 at 00:09

I came up with this idea and it works perfectly. Okay so basically we want to get rid of the videos first frame from the display and then resize the poster to the videos actual size. If we then set the dimensions we have completed one of these tasks. Then only one remains. So now, the only way I know to get rid of the first frame is to actually define a poster. However we are going to give the video a faked one, one that doesn't exist. This will result in a blank display with the background transparent. I.e. our parent div's background will be visible.

Simple to use, however it might not work with all web browsers if you want to resize the dimension of the background of the div to the dimension of the video since my code is using "background-size".

HTML/HTML5:

<div class="video_poster">
    <video poster="dasdsadsakaslmklda.jpg" controls>
        <source src="videos/myvideo.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
<div>

CSS:

video{
    width:694px;
    height:390px;
}
.video_poster{
    width:694px;
    height:390px;
    background-size:694px 390px;
    background-image:url(images/myvideo_poster.jpg);
}

that's clever, i gave it a shot. It's not perfect but getting there...http://jsfiddle.net/trpeters1/NJtc9/ — tim peterson, Mar 15 '13 at 01:16
Yeah, you are right. By looking at your jsfiddle I now realize that the dimension of the video must also be correct and not just the video element. I guess I was just lucky when I tried it on my page. — Jonathan J, Mar 15 '13 at 14:19

score 2 · Answer 8 · answered Nov 04 '16 at 11:13

You can use poster to show image instead of video on mobile device(or devices which doesn't support the video autoplay functionality). Because mobile devices not support video autoplay functionality.

<div id="wrap_video">
<video preload="preload" id="Video" autoplay="autoplay" loop="loop" poster="default.jpg">
<source src="Videos.mp4" type="video/mp4">
Your browser does not support the <code>video</code> tag.
</video>
</div>

Now you can just style the poster attribute which is inside the video tag for mobile device via media-query.

#wrap_video
{
width:480px;
height:360px;
position: relative;
} 
@media (min-width:360px) and (max-width:780px)
{
video[poster]
{
top:0 !important;
left:0 !important;
width:480px !important;
height:360px !important;
position: absolute !important;
}
}

Actually, iOS 10+ supports the video autoplay functionality with the playsinline attribute. — Lukas Petr, Oct 19 '17 at 13:25

étale-cohomology · Answer 9 · 2022-05-13T16:20:10.427

No need for extra divs.

HTML:

<video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="https://mathisart.org/vid0000_plandemic.mp4" type="video/mp4" />
  <source src="https://mathisart.org/vid0000_plandemic.ogg" type="video/ogg" />
  <source src="https://mathisart.org/vid0000_plandemic.webm" type="video/webm" />
</video>

CSS:

video[poster]{ object-fit:cover; }  /* or object-fit:fill */

score 1 · Answer 10 · answered May 16 '14 at 17:14

1

I had a similar issue and just fixed it by creating an image with the same aspect ratio as my video (16:9). My width is set to 100% on the video tag and now the image (320 x 180) fits perfectly. Hope that helps!

answered May 16 '14 at 17:14

deebs

1,390
10
23

score 1 · Answer 11 · edited May 26 '15 at 10:00

1

You can resize image size after generating thumb

exec("ffmpeg -i $video_image_dir/out.png -vf scale=320:240 {$video_image_dir}/resize.png",$out2, $return2);

edited May 26 '15 at 10:00

bummi

27,123
14
62
101

answered May 26 '15 at 09:31

Motilal Soni

346
2
6

score 1 · Answer 12 · answered Dec 24 '16 at 05:57

height:500px;
min-width:100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size:100% 100%;
object-fit:cover;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

bpossolo · Answer 13 · 2022-06-17T04:28:37.613

I think the best way to do this for a fully responsive video is with css aspect-ratio.

See example below of a video with a poster that is much taller than the native video source.

By setting the video width to 100% and height: auto, the computed height will respect the specified aspect ratio.

When combined with object-fit: cover, the poster image is constrained to the video element's computed height/width.

You can then optionally position the poster using object-position.

Note 1: I used css vars simply for readability. They correspond to the video source's native height/width.
Note 2: one other advantage of using aspect-ratio is that the browser can layout the page elements and reserve real-estate for the video before the video metadata has actually loaded. This avoids browser re-layout penalties and less "content jumping" which is better for your users.
Note 3: apologies, it seems safari hides the poster as soon as the video is loaded.

video {
  --video-width: 426;
  --video-height: 240;
  aspect-ratio: var(--video-width) / var(--video-height);
  width: 100%;
  height: auto;
  object-fit: cover;
}

<video controls poster="https://media.newyorker.com/photos/5c5349189922c254df56d625/master/pass/Syme-Irving-Penn.jpg">
  <source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" type="video/mp4">
</video>

score 0 · Answer 14 · edited Nov 08 '19 at 09:26

0

This worked

<video class="video-box" poster="/" controls>
    <source src="some source" type="video/mp4">
</video>

And the CSS

.video-box{
 background-image: 'some image';
 background-size: cover;
}

edited Nov 08 '19 at 09:26

bharatk

4,202
5
16
30

answered Oct 28 '19 at 16:11

user2903934

59
1
11

score 0 · Answer 15 · answered Nov 30 '19 at 01:33

  <div class="container">
        <video poster="~/Content/WebSite/img/SiteSetting/Load.gif" autoplay muted loop class="myVideo">
            <source src="~/Content/WebSite/images/VideoTube.mp4" type="video/mp4" />
        </video>

    </div>



 <style>
    .myVideo {
position: absolute;
right: 0;
left: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
object-fit: inherit;
 }
@media only screen and (max-width:768px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
    }
   }

     @media only screen and (max-width:320px) {
.myVideo {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: -webkit-fill-available;
    min-height: 100%;
    object-fit: cover;
  }
}
</style>

Make HTML5 video poster be same size as video itself

15 Answers15

Update

Linked

Related