How to make an HTML5 video poster be same size as video itself with CSS?

Spread the love

Sometimes, we want to make an HTML5 video poster be same size as video itself with CSS.

In this article, we’ll look at how to make an HTML5 video poster be same size as video itself with CSS.

How to make an HTML5 video poster be same size as video itself with CSS?

To make an HTML5 video poster be same size as video itself with CSS, we set the object-fit property.

For instance, we write

<video
  controls
  width="100%"
  height="100%"
  poster="https://picsum.photos/500/500"
>
  <source
    src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
    type="video/mp4"
  />
</video>

to add a video element.

Then we write

video {
  object-fit: cover;
}

to make the poster fit the video element with object-fit: cover;.

Conclusion

To make an HTML5 video poster be same size as video itself with CSS, we set the object-fit property.

Leave a Reply

Your email address will not be published. Required fields are marked *