Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Strange gap at the bottom of the HTML video element, when using object-fit: cover;

In some cases, when one of the parent elements in HTML is having margin of padding defined at the bottom or at the top, it will happen that your video object can't stretch the source media to the fullest within itself. Even if you define the object-fit:cover you will still have the small gap at the top or the bottom of the video tag. This is happening only in Google Chrome as far as I know.

like image 963
Mladen Janjetovic Avatar asked Sep 16 '25 09:09

Mladen Janjetovic


1 Answers

In my case, setting display: block; on video element solved the issue.

like image 87
bluelights Avatar answered Sep 19 '25 03:09

bluelights