How can a child element override its parent's background?

There are white letters on a black background. There may be rectangular spaces between words that display video. How can I achieve this behavior? I tried using mix-blende-mode, but the rect element always evaporates into the parent background. I tried with pseudo-elements and giving different z-index/position to the elements, but I can't do it.

Here is an example of how it should be: Read more

And what I did below

* {
        box-sizing: border-box;
    }
    html, body {
        block-size: 100%;
    }


    body {
        margin: 0;
    }

    .content {
        position: relative;
        width: 100%;
        height: 100%;
    }


    .text {
        font-size: 10vi;

    }



    .text-block {
        position: relative;
        z-index: 2;
        background-color: black;
        color: white;
        padding: 30px;
        width: 100%;
        height: 100%;
    }



    .rect {
        display: inline-block;
        width: 150px;
        height: 5vi;
        margin: 0 10px;
        position: relative;
        z-index: 1;

    }




    .video {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

<div class="content">
            <div class="text-block">
                <span class="text">We're here</span>
                <span class="rect"></span>
                <span class="text"> to make healthy </span>
                <span class="rect"></span>
                <span class="text">livin effortless,</span>
                <span class="text"> so you can</span>
                <span class="rect"></span>
                <span class="text">live longer</span>
                <span class="text">and happier</span>
                <span class="rect"></span>
            </div>
            <video class="video" autoplay loop muted playsinline>
                <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
            </video>
          
        </div>

Answer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
        }
        html, body {
            block-size: 100%;
        }
        body {
            margin: 0;
            background-color: black; /* Set black background */
        }
        .content {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .text {
            font-size: 10vi;
            position: relative;
            color: white; /* White text color */
        }
        .text-block {
            position: relative;
            z-index: 2; /* On top of the video */
            color: white;
            padding: 30px;
        }
        .rect {
            display: inline-block;
            width: 150px; /* Width of the rectangular space */
            height: 5vi; /* Height of the rectangular space */
            margin: 0 10px;
            position: relative;
            overflow: hidden; /* Ensures content doesn't overflow */
        }
        .video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1; /* Behind the text */
        }
        /* This will style the inner video in the .rect */
        .rect video {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="text-block">
            <span class="text">We're here</span>
            <span class="rect">
                <video autoplay loop muted playsinline>
                    <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
                </video>
            </span>
            <span class="text"> to make healthy </span>
            <span class="rect">
                <video autoplay loop muted playsinline>
                    <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
                </video>
            </span>
            <span class="text">livin effortless,</span>
            <span class="text"> so you can</span>
            <span class="rect">
                <video autoplay loop muted playsinline>
                    <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
                </video>
            </span>
            <span class="text">live longer</span>
            <span class="text">and happier</span>
            <span class="rect">
                <video autoplay loop muted playsinline>
                    <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
                </video>
            </span>
        </div>
        <video class="video" autoplay loop muted playsinline>
            <source src="https://msttestaddfiles.netlify.app/video.mp4" type="video/mp4" />
        </video>
    </div>
</body>
</html>

Answer

Enjoyed this article?