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

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

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!

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>

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

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.

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

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>

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

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;

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

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

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

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

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>