In this tutorial, you will learn how to set a video as text background with CSS. Watch the video below for a detailed tutorial.
<body>
<div class="container">
<video autoplay loop muted>
<source src="ocean.mp4" type="video/mp4">
</video>
<div class="banner">
<h1>LOREM</h1>
</div>
</div>
</body>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;
}