HTML Video element (<video>) doesn't support "object-fit: cover"

I wanted to use object-fit: cover on an <video> element in a project but it doesn’t work in Samsung Internet Browser. I had a look on a few devices via Browserstack. I used it on the <img> element as well and it works.

I have a deployed example here: https://nextjs-example.webdevelukas.vercel.app/
And a repository here: https://github.com/webdevelukas/nextjs-example

:white_check_mark: The expected behaviour:
The video has the defined height and the video is covered inside the box.
bs_realdroid_Mobile_Samsung Galaxy S10-9 0-1440x2960 (1)

:warning: The actual behaviour:
The video has full height and is above the text, that shows up after the video.
bs_realdroid_Mobile_Samsung Galaxy S10-9 0-1440x2960

In other browsers i got the expected behaviour.

Cheers Lukas :v:

1 Like

Hello Lukas,

Hope you are doing well! We were unable replicate the deviation in behavior on the latest version of Samsung Internet Browser (v 12.1.2.5). As you can see from the image below, the video has the defined height, is covered inside the box and does not cover up the text below.

We would like to request to update to the newest version of Samsung Internet Browser (v 12.1.2.5) and test out on a physical android device or on our Remote Test Lab.

PS: If you find this answer helpful please press the “like” button so that others can find it more easily.

Best Regards,
Shuvo
Samsung Developer Program

1 Like

thanks its very god
very nice article


سئو وردپرس