Streaming live at 10am (PST)

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


#1

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


#2

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


#3

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


#4

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


#5

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


#6

You are welcome smile Glad I could help.

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


#7

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


#8

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