rich_flame
December 9, 2018, 10:30pm
1
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
January 6, 2019, 11:41am
2
Can you add your share link please?
jorn
January 28, 2019, 10:02am
3
Hope you solved it by now @rich_flame but here’s a solution for you.
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
February 10, 2021, 5:59pm
4
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,
1 Like
pablopjc
June 3, 2021, 12:52pm
5
Hi Ziv, I have the same problem, how did you resolved it?
Thank you,
I’m having the same issue in safari and chrome.