Aisu Posts - Answer Overflow

Aisu

•Created by Aisu on 4/13/2025 in #help

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?

3 replies

Gaming

Programming