Streaming live at 10am (PST)

Rounded corners with embeds safari


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


Video in rounded corners and overflow hidden div-element - problems with safari