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

[rich_flame (Richard Diks)]

Hello, I designed a div-element for a video with rounded corners and overflow hidden. On chrome and firefox, it is working fine. On Safari it’s not working.

https://greenflames.com/weihnachtsfeier

Can somebody help out?

Richard

[DFink (Dave)]

Can you add your share link please?

[jorn (Jörn)]

Hope you solved it by now @rich_flame but here’s a solution for you.

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://vim…

[zivrotems (Ziv Rotem)]

Hi everyone,

I’ve added a video background to my site and wanted to add rounded corners. For some reason the two top edges are squared, what do I do?

https://preview.webflow.com/preview/wivclub?utm_medium=preview_link&utm_source=designer&utm_content=wivclub&preview=a21d8d4ba23291062a36d371f1e5bf9d&mode=preview

Thank you,
Ziv

[pablopjc (Pablo)]

Hi Ziv, I have the same problem, how did you resolved it?

Thank you,
Pablo

[simplyumedia]

I’m having the same issue in safari and chrome.