Rounded corners with embeds safari

Community resources Webflow Tips
#1

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
Video in rounded corners and overflow hidden div-element - problems with safari
#2

Thank you so much for sharing this!

#3

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

#4

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
#5

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

#6

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.