DEV Community

Cover image for Video as Text background using CSS
Jatin Sharma
Jatin Sharma

Posted on

Video as Text background using CSS

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

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.๐Ÿ˜Š๐Ÿ‘‡

Buy Me A Coffee

Discussion (1)

Collapse
sush_5191 profile image
Sushant Garudkar

Nice one!