Video as Text background using CSS

#css #webdev #tutorial #beginners

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;

}