Hi all, I’d like to have a gradient as a mask/overlay for a video. Alternatively, I’d like to apply an image mask, like a small PNG with a repeatable pattern eg a dots pattern (I figure the answer for one should be the same as the other).
The short of it:
there’s an outer div that is the mask (z-index 20), and inside this is an embed code for the video with z-index 10.
…I’m going crazy trying to apply it, so I’ve got fingers crossed someone in the community has the magic touch.
From structure that I can see, you put embed video inside the div and then trying to add background to that div video will always cover background.
For make overlay, you should create one more div inside the video container, put there pattern or gradient on background and make that div z-index higher than embed video. Then it will works
Hi @sabanna,
Unfortunately, your suggestion isn’t working – I’m wondering if it has to do with the width/height min-width/min-height setup (and also the embed video has Video code width=100%, thoughts?
container is pattern: z=25
overlay is blue background color: z=20
mask is a gradient: z=15
bgvideo is the embed video code: z=10
I’ll clean it up when I get it working, just broke it out so much so I could see from where things were coming.
When you put divs inside of each other one of them become parent and another nested element. Parent will always be a background but will never become an overlay.
If one parent element has inside few elements, which is on same level, these elements still nested to parent, but become siblings to each other. And they may cover each other like layers. Here you can give them different z-index and it will change “layers positioning” (which one cover others).
video will always cover background.
Glad I could help.