Table of Contents

PreviewHTMLCSSWrapping up

Video as Text background using CSS

Jatin Sharma
Jatin Sharma
Nov 12, 2021
2 min read
255 words

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 -

Preview

preview

Now you have seen what we are up to so let's get hands into the code -

HTML

index.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.

CSS

Now let's style it with CSS -

styles.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;
}

Wrapping up

This is all you need to create a video as text's background. You can go furhter with this and can use in you projects. See you next time.

Jatin's Newsletter

I write monthly Tech, Web Development and chrome extension that will improve your productivity. Trust me, I won't spam you.

Share on Social Media: