Join the Webstudio community

Updated 2 weeks ago

Svg mask on Vimeo background video

At a glance
I’m creating a website and want to use a custom svg to mask a video.
How do I create this?
Marked as solution
Repeating the above:
  1. set display: relative on any container
  2. add a box inside of that container at the end
  3. set position absolute and top/left/bottom/right = 0
Now this new box is the overlay and you can do anything with it, its going to be on top
View full solution
O
K
8 comments
you want to display a layer above the video?
this is the regular approach: set position relative to any container that holds the video, add a box into that container with position absolute and top/left/bottom/right 0
Thanks for your reply.
An example is in the link via code pen.
https://codepen.io/jemuel23euel/pen/ExXMddN
yeah its just an overlay
My next question is how to set it up so the layer ontop clips the video. Preferably using an svg.
Repeating the above:
  1. set display: relative on any container
  2. add a box inside of that container at the end
  3. set position absolute and top/left/bottom/right = 0
Now this new box is the overlay and you can do anything with it, its going to be on top
Add a reply
Sign up and join the conversation on Discord