jorn
(Jörn)
January 28, 2019, 9:59am
#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
Thank you so much for sharing this!
Jorn, thanks much for this post - solved my snag right away! Cheers!
Toby
(Toby)
November 19, 2020, 9:39pm
#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
Julien_De
(Julien)
January 19, 2022, 2:55pm
#5
Thank you so much, set the Z-index to zero works like a charm for me
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.