Blending mode over video not working

Design help Custom code
1

Hi everyone!

I am trying to use a blend mode over a video and it’s not working. I am not a developer but reading through the forum I found the code you can add to the custom code to make this work. I have successfully done over a photo on the same website but now the client wanted to change the hero photo to a video and the effect is not working. Is there anything I can do to achieve the same effect?

here is the live site where you can see the video
http://alphapex2.webflow.io/home2

the official home page has the photo with the blend mode:
http://alphapex2.webflow.io/

here is the read-only link
https://preview.webflow.com/preview/alphapex2?preview=04aa42079517c69d13d6bbc39f50d4ca

I would appreciate any help
Thank you
Lila

2

Hi @oliveiralila, one thing you can try is to put a new div just under the Hero video as the first child element, and style it with absolute position, full cover:

44%20PM

Apply the blend color to the class assigned to the Div you use for the blend:

44%20PM
44%20PM488×1002 34.2 KB

The BG video widget is a scripted widget that automatically applies the video to the bg video div, so what is likely happening is that the video is covering the blend. I will take a look further, but using a separate div for the cover works for me on this end.

1 Like
4

Hi @cyberdave,

I am trying to make it work but it looks like it displays the multiply for a split second and it goes back to solid green. Am I doing something wrong? could you take a look at it again please?

Thank you
Lila

5

I am having the same issue, my image isn’t responding to the blend mode at all. :confused: I am not sure what I am doing wrong.

https://preview.webflow.com/preview/mens-summit?utm_medium=preview_link&utm_source=designer&utm_content=mens-summit&preview=d8174202aa073bdbb59717f996f54947&pageId=5d87a9e14a655754025d3a6a&mode=preview

https://mens-summit.webflow.io/2021-update