Make the HTML5 video poster the same size as the video itself.

Question

Does anyone know how to resize an HTML5 video poster to fit the exact size of the video itself?

here's a jsfiddle that shows the problem: http://jsfiddle.net/zPacg/7/

here is this 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; }​ 

Note that the orange rectangle does not scale to the red border of the video.

Also, just adding CSS below does not work as it retells the video along with the poster:

 video[poster]{ height:100%; width:100%; } 

Answer 1

You can use a transparent poster image in combination with a CSS background image to achieve this ( example ); however, for the background to be stretched to the height and width of the video, you must use the absolutely positioned <img> ( example ).

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

Answer 2

Depending on which browsers you are targeting, you may find the object-fit property to solve this problem:

 object-fit: cover; 

or maybe fill is what you are looking for. Still considered for IE .

Answer 3

Or you can simply use the preload="none" attribute to make the VIDEO view 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> 

Answer 4

I played around with this and tried all the solutions, in the end the solution I went with was a suggestion from the Google Chrome Inspector. If you add this to your CSS, this worked for me:

 video{ object-fit: inherit; } 

Answer 5

My solution combines the answers of user 2428118 and Veiko Jääger, which allows you to preinstall, but does not require a separate transparent image. Instead, we use a transparent basep encoded 1px image.

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

Answer 6

I came up with this idea and it works great. So, basically we want to get rid of the first frame of the video from the screen, and then change the poster size to the actual video 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 the poster. However, we are going to give a fake video, which is not. This will create a blank display with a transparent background. That is, our parent background div will be visible.

Easy to use, however, it may not work with all web browsers if you want to change the background size of the div to the size of the video, as my code uses "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); } 

Answer 7

I had a similar problem and I 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) is perfect. Hope this helps!

Answer 8

You can resize the image after creating the thumb.

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

Answer 9

You can use a poster to display the image instead of video on a mobile device (or devices that do not support the auto-play video function). Since mobile devices do not support the automatic video playback features.

 <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 simply create a poster attribute that is inside the video tag for a mobile device through a media request.

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

Answer 10

 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; 

Answer 11

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

cap

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

Please note that the video controls are above our image , so our image is not displayed completely. If you use a cover suitable for the subject, edit the image in the visual application as a Photoshop and add the contents of the bottom edge.