Log in
Log into community
Join the Webstudio community
New post
View all posts
Related posts
Was this helpful?
😞
😐
😃
Powered by
Hall
Solved
Updated 2 weeks ago
0
Follow
Svg mask on Vimeo background video
Svg mask on Vimeo background video
Solved
0
Follow
At a glance
K
Kwame
2 weeks ago
·
I’m creating a website and want to use a custom svg to mask a video.
How do I create this?
O
Oleg Isonen
2 weeks ago
Marked as solution
Repeating the above:
set display: relative on any container
add a box inside of that container at the end
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
Share
Open in Discord
O
Oleg Isonen
2 weeks ago
you want to display a layer above the video?
O
Oleg Isonen
2 weeks ago
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
K
Kwame
edited 2 weeks ago
Thanks for your reply.
An example is in the link via code pen.
https://codepen.io/jemuel23euel/pen/ExXMddN
O
Oleg Isonen
2 weeks ago
yeah its just an overlay
K
Kwame
2 weeks ago
My next question is how to set it up so the layer ontop clips the video. Preferably using an svg.
O
Oleg Isonen
2 weeks ago
Repeating the above:
set display: relative on any container
add a box inside of that container at the end
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
O
Oleg Isonen
edited 2 weeks ago
old video about it
https://www.youtube.com/watch?v=XO3AntguPZE
K
Kwame
2 weeks ago
Thanks!
Add a reply
Sign up and join the conversation on Discord
Join on Discord