Jatin Sharma In this article, we will use any video as the background of the text. As you may have already know you cannot use directly video as the text background, so well take the little help of css to make it work. First things first let's see what are building -
Now you have seen what we are up to so let's get hands into the code -
HTML
<div class="container">
<video class="bg-video" autoplay loop>
<source src="https://imgur.com/2cSaKIt.mp4" type="video/mp4" />
</video>
<p class="text">AWESOME TEXT</p>
</div>
In the HTML code, the container class is the main container to hold the video and tex. It has two children one is video and text.
Now let's style it with CSS -
CSS
* {
margin: 0;
padding: 0;
}
/* Container should be full height and full width */
.container {
position: relative;
width: 100vw;
height: 100vh;
}
.container > .bg-video {
width: 100%;
height: 100%;
}
/* background-color and color should be the same as the below otherwise it won't work /
.container > .text {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background-color: #000;
color: #fff;
font-weight: 900;
font-size: 100px;
font-family: sans-serif;
/ Mix Blend Mode does the all magic */
mix-blend-mode: multiply;
user-select: none;
}
Codepen is Here
See the Pen video-as-text-background by Jatin @j471n on CodePen.
You can now extend your support by buying me a Coffee.😊👇
