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    lt video controls width  100   height  100    poster  http   www wpclipart com blanks buttons glossy buttons glossy button blank orange rectangle png  gt     lt source src  http   demo inwebson com html5-video iceage4 mp4  type  video mp4    gt     lt source src  http   demo inwebson com html5-video iceage4 ogg  type  video ogg    gt     lt source src  http   demo inwebson com html5-video iceage4 webm  type  video webm    gt   lt  video gt     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

User · Answer

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

User · Answer

lt div class  container  gt           lt video poster    Content WebSite img SiteSetting Load gif  autoplay muted loop class  myVideo  gt               lt source src    Content WebSite images VideoTube mp4  type  video mp4    gt           lt  video gt        lt  div gt       lt style gt       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         lt  style gt

User · Answer

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

User · Answer

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         lt video preload  none  controls gt      lt source src  movie mp4  type  video mp4  gt      lt source src  movie ogg  type  video ogg  gt    lt  video gt

User · Answer

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

User · Answer

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

User · Answer

lt video src  videofile webm  poster  posterimage jpg  controls preload  metadata  gt      Sorry  your browser doesn t support embedded videos   lt  video gt    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

User · Answer

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    lt div id  wrap video  gt   lt video preload  preload  id  Video  autoplay  autoplay  loop  loop  poster  default jpg  gt   lt source src  Videos mp4  type  video mp4  gt  Your browser does not support the  lt code gt video lt  code gt  tag   lt  video gt   lt  div gt    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

User · 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  lt img gt  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

User · Answer

This worked   lt video class  video-box  poster     controls gt       lt source src  some source  type  video mp4  gt   lt  video gt    And the CSS   video-box   background-image   some image    background-size  cover

User · Answer

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

User · Answer

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

User · Answer

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    lt style type  text css   gt      video          background  transparent url  poster jpg   50  50    cover no-repeat          lt  style gt   lt video controls poster  data image gif base64 R0lGODlhAQABAIAAAAAAAP   yH5BAEAAAAALAAAAAABAAEAAAIBRAA7   gt       lt source src  movie mp4  type  video mp4  gt       lt source src  movie ogg  type  video ogg  gt   lt  video gt

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

Examples related to css

Examples related to html

Examples related to attributes

Examples related to html5-video