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.
