Rounded corners with embeds safari

I was helping a friend with a problem and thought I share my solution with you.

If you add a video embed and add corners to that div it will not work in safari.
The solution is a little extra CSS.

First make div with corner radius and and set it to overflow hidden, and also a width. Put the video element inside that div.

Now that wrapper div needs some extra css

.video-block {
-webkit-mask-image: -webkit-radial-gradient(white, black);
}

You can see a working example here: https://vimeo-test.webflow.io

Read only: https://preview.webflow.com/preview/vimeo-test?utm_source=vimeo-test&preview=325c22a6a3420b0c8d2abcf09852ed1d

Hope it is helpful for someone.

7 Likes

Thank you so much for sharing this!

Jorn, thanks much for this post - solved my snag right away! Cheers!

Hi Jorn, thanks for that.
One more tip. It works for me without extra CSS, if you give the DIV the settings “Overflow hidden” and “Relative”. If necessary, then set the Z index to -1 or zero

Toby

4 Likes

Thank you so much, set the Z-index to zero works like a charm for me :ok_hand:

I tried all this but it’s still not working for me in Safari or Chrome on my phone. It looks fine on desktop though.