I want to recreate the effect seen on this page: Home | Piknic Électronik where you can se a shape cropped video on autoplay. The problem I have is I can do it with a div on top containing a transparent png that masks it but when you scroll the background changes colour and the png mask remains the same colour, revealing the mask which looks poorly. How can I solve this? webflows video options are very limited.
Thanks in advance!
Welcome to the community @Tomas_Saavedra
I’d recommend using the
mask-image property (this is how it’s done on the site your referencing):
It’s worth noting that using an SVG rather than a PNG would allow you to use the
fill="currentColor" style to control the color, however the
mask-image property eliminates that need altogether and simplifies things a bit.
The video element itself can be done natively or with custom code (if you find the native solution too limiting) since you just need to apply the mask to the wrapping div.
Hopefully that helps but don’t hesitate to reach out if you run into any issues along the way