[css] Make HTML5 video poster be same size as video itself

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

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;

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

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.

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>

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

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!

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

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>

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

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);

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

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