Hello,
I am Flip.Shop developer.
Our site is having a problem displaying a Video whose size adjusts dynamically to the width and height of the parent component.
Please visit this page: https://flip.shop and scroll through a few posts.
On all normal browsers (Chrome/Firefox) the video loads nicely. But on Safari 15.5 (desktop and mobile) you can see a flicker for a while. The first frame of the video can't adjust to the size.
Video component looks like this:
<video
preload="auto" loop="" playsinline="" webkit-playsinline="" x5-playsinline=""
src="blob:https://flip.shop/1039dfe6-a1f4-4f80-822b-250665225c68" autoplay=""
style="width: 100%; height: 100%;">
</video>
and CSS of parent component looks like this:
width: 100%;
height: 100%;
position: relative;
& video {
object-fit: cover;
}
Is there any solution to prevent video from going crazy in the Safari browser?
The only workaround that seems to work is to show a poster covering the video until the video plays. Unfortunately, there is no event to inform that Safari is freaking out, so this poster has to be removed after a 300-500 millisecond timeout connected to the "play" event, which significantly delays the display of this video (on Safari).
