Make HTML5 video poster be the same size as video itself

Ensuring adaptability and correct aspect ratios

How to use CSS background with a transparent image as a poster

If you prefer not to use a conventional image file for your poster, an option could be a transparent image along with a CSS background. Below is an example of how you could implement this:

video {
  background: url('poster.jpg') center center / cover no-repeat;
}


You then set the poster attribute to a base64 encoded 1px transparent image. This is how it'd look:

<video poster="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" controls>
  <!-- don't forget to add your sources! -->
</video>


How to effectively deal with differing browser compatibility

By using the <source> element inside the video tag, you'd be able to offer multiple video formats for broad browser compatibility:

<video poster="poster.jpg" controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>


For browsers not fluent in object-fit, you could consider alternative methods such as an absolutely positioned <img> tag beneath the video.

How to fine-tune your approach for optimization and aesthetics

How to reduce the initial loading times

An effective strategy would be to use preload="none" to stop the video from loading straight away, and consider loading the poster image lazily.

Styling your content to be responsive

For the responsive crowd, setting video dimensions to percentages would work best:

video {
  width: 100%;
  height: auto;
  background-size: cover; // one size fits all!
}


Keeping your aspect ratio consistent

Choose your poster's aspect ratio with care to either match the video's innate ratio or use object-fit: fill to stretch the poster to fit the exact dimensions of the video.

Sifting through practical examples

Testing is a crucial part of any web developer's life. Tools such as Google Chrome's Inspector can provide real-time CSS property suggestions.

Avoid extras that may inadvertently resize the video. Below is an example of how to transparently set the video background:

video {
  background-size: 100% 100%; // fits like a glove!
}


For a cleaner method, you may want to embed the poster image directly in HTML with the data URI scheme:

<video poster="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/..." controls>
   <!-- sources -->
</video>
