I'm looking to design a landing page featuring a colored div with a clip-path, intended to showcase a video playing in the background. However, I'm encountering an issue where the background looks grayish without any clear explanation.
Despite trying various methods, I haven't been able to resolve this problem.
Below is the code snippet I have been working on :
.video_home_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.video_home_background {
background: green;
position: absolute;
top: 0;
left: 0;
z-index: 11;
width: 100vw;
height: 100vh;
clip-path: url(#mask);
}
... // rest of the CSS code
I could really use some advice here as I'm fairly new to working with svg clip paths and struggling to understand the issue.