cssgoogle-chromehtml5-videocoverobject-fit

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.


Solution

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