Learn to use video as Text background using CSS

Today we are going to learn, How to use a video as a text background and add a dynamic and engaging element to your website.

With CSS, you can achieve this effect by overlaying text on top of a video element.

Here’s a step-by-step guide on how to do it:

Step 1: Create the HTML Structure

First, we need to create the HTML structure for the video background and the text overlay. The video element will contain your video file, and the text element will contain your text content.

<div class="text-container">
  <video class="bg-video" autoplay loop>
    <source src="./your-video-file.mp4" type="video/mp4" />
  </video>
  <p class="text">AWESOME TEXT</p>
</div>

Replace "your-video-file.mp4" with the path to your video file.
check out some cool video background here

Step 2: Style the Container

Next, style the containers height and width according to your needs using the following CSS:

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

Step 3: Style the Video

Style the video element to cover the entire container

.bg-video {
  width: 100%;
  height: 100%;
}

Step 4: Style the Text

Style the text element to be positioned absolutely within the container and sets its color and background color. The mix-blend-mode: multiply; property is used to blend the text with the video background, creating a cool effect.

.text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: #000; /* Background color for better readability */
  color: #fff; /* Text color */
  font-weight: 900;
  font-size: 100px;
  font-family: sans-serif;
  mix-blend-mode: multiply; /* Blend text with video */
  user-select: none; /* Prevent text selection */
}

• The inset: 0; shorthand property is equivalent to setting top: 0; right: 0; bottom: 0; left: 0;
• This ensures that the text covers the entire area of the container.

Conclusion

Finally we have created a dynamically looking text with a video background,
If there is any question or confusion regarding the tutorial. Feel free to ask your questions in the comments below.

But wait⏳ what is mix-blend-mode CSS Property used for ?

The mix-blend-mode CSS property specifies how an element’s content should blend with its background.

There are several blend modes available, each determining how the colors of the element and its background interact. Here are some common blend modes:

1. normal: The default value, where the element is rendered normally without blending.
2. multiply: Multiplies the colors of the element and its background. This often results in darker colors.
3. screen: Multiplies the inverse of the colors of the element and its background. This often results in lighter colors.
4. overlay: Combines multiply and screen modes based on the luminosity of the background color. It’s a good option for creating high contrast.
5. color-dodge, color-burn, hard-light, soft-light, difference, exclusion etc. These modes offer various ways to blend colors based on different mathematical formulas.

In the context of using a video as a text background, setting mix-blend-mode: multiply;, It blends the colors of an element with its background to create cool effects, like making text look like it’s part of a video playing in the background.

Thank you for reading this article. If you found this helpful and interesting, please clap and follow me for more such content.

you can also check out my new app on playstore here
must Have chrome extension if you are applying for job click here

If I got something wrong, mention it in the comments. I would love to improve.

Connect with me on GitHub, Twitter, Youtube and LinkedIn