Streaming live at 10am (PST)

Using gradients and/or bg image as a mask for video

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.

thanks,
Mike

my link:
https://preview.webflow.com/preview/bgvid-w-grad?preview=8edd415c7713d788f32cffe67b188ddc

Hello @misterkak,

From structure that I can see, you put embed video inside the div and then trying to add background to that div :smiley: 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 :smile:

Cheers,
Anna

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.

Mike

Ok.
Look on this 2 structures

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).

Hope I could explain correct,

Regards,
Anna

3 Likes

awesome, that makes all the difference, thank you @sabanna!

1 Like

You are welcome :slight_smile: Glad I could help.

P.S. My kid was very attracted by video that you have on the site lol

Haha, so was mine! took ages to write the email :slight_smile:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.