Join the Webstudio community

Updated last month

Svg mask on Vimeo background video

At a glance
The community member is creating a website and wants to use a custom SVG to mask a video. Other community members suggest setting the container with the video to position: relative, and adding a box inside it with position: absolute and top/left/bottom/right: 0 to create an overlay. They also mention an example in a CodePen link and an old video about this approach. The answer provided repeats the steps to create the overlay.
Useful resources
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