KPC
Kevin Powell - Community•6d ago
Aisu

Video CSS mask

Hi. I'm new here and wanted to see if anyone could help me with a css problem I got. I need to make a mask for a video like on this video. 
<header>
            <video class="video" autoplay playsinline muted loop preload>
                <source src="./video.mp4" />
            </video>
            <div class="container">
                <span class="text">We're here</span>
                <span class="mask"></span>
                <span class="text">to make healthy</span>
                <span class="mask"></span>
                <span class="text">living effortless, so you can</span>
                <span class="mask"></span>
                <span class="text">live longer and happier</span>
                <span class="mask"></span>
            </div>
        </header>
<header>
            <video class="video" autoplay playsinline muted loop preload>
                <source src="./video.mp4" />
            </video>
            <div class="container">
                <span class="text">We're here</span>
                <span class="mask"></span>
                <span class="text">to make healthy</span>
                <span class="mask"></span>
                <span class="text">living effortless, so you can</span>
                <span class="mask"></span>
                <span class="text">live longer and happier</span>
                <span class="mask"></span>
            </div>
        </header>
this is how my current html looks like. I've tried to look up some tutorials, and I've only found tutorials that need white background and black text for the mask to work through mix-blend-mode: screen; . Could you give me any pointers on how to make this thing, please?
2 Replies
Rägnar O'ock
Rägnar O'ock•6d ago
have you tried using background images with background-position: inherit on the animated rectangles ?
Rägnar O'ock
Rägnar O'ock•6d ago
arf, background position inheritance only works with fixed and absolute stuff... you can get with by using solid baground on everything else and let the video showby transparence tho : https://codepen.io/ragnar_ock/pen/yyLmwKq (please note that I used a GIf as background image here unlike your video tag, but it's functionnaly the same thing
Rägnar O'ock
CodePen
background stuff
...

Did you find this page helpful?