Rounded corners with embeds safari

[jorn (Jörn)]

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: Webflow - vimeo-test

Hope it is helpful for someone.

[chrismackintosh]

Thank you so much for sharing this!

[somegoodco]

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

[Toby]

@jorn

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

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

[Julien_De (Julien)]

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

[simplyumedia]

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.