Video as Text Background

In this tutorial, you will learn how to set a video as text background with CSS. Watch the video below for a detailed tutorial.


    <div class="container">
        <video autoplay loop muted>
            <source src="ocean.mp4" type="video/mp4">
        <div class="banner">


body  {
    font-family: 'Oswald', sans-serif;
    background: url('sand.jpg') no-repeat center top / cover;
    margin: 0;

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;

.container video {
    width: 100%;
    object-fit: cover;
    height: 20em;

.banner {
    position: absolute;
    width: 100%;
    top: 27%;
    font-size: 8em;
    text-align: center;
    background: white;
    color: black;
    mix-blend-mode: screen;

.banner h1 {
    margin: 0;


Ocean Video:
White Sand image: