DEV Community

Codewithrandom Blogs
Codewithrandom Blogs

Posted on

How to Add Text on Background Video in HTML and CSS

Hey Guys, Welcome To Our Blog, In Today's Blog We Are Going To See How To Create An Add Text Background Video in HTML and CSS. 

Many time we give the title on the video overlay and the video play in the background and text appear on the video so we create this text over the video using HTML and CSS.

So,  Let's Begin Our Text Over Video Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

HTML CODE For Text Over Video

<video playsinline autoplay muted loop>
     <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video">
    Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

<header>
  <nav>

    <a href="#">Shop</a>
    <a href="#">Stores</a>
    <a href="#">Products</a>
  </nav>  
</header>

<div class="overlay">
  <h2>Meet the crazy-smart women we asked.</h2>
</div>
Enter fullscreen mode Exit fullscreen mode

Now In this code, We are adding the video as a background using the video tag and its attributes, then we are opening the header and nav tag, and inside of those, we are adding certain links using the anchor tag which is used as navigation links.

After that, we are closing the nav and header tag and then we add the major part which is text using h2 inside of the div class.

So now we are making the text to overlay it in the video background using the given CSS code.

CSS CODE For Text Over Video

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900);
* {
  box-sizing: border-box;
}

body {
    font-family: "Lato","Avenir Next",Arial,sans-serif;
  margin: 0;
  background: #000;
  background-size: cover;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.overlay {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.overlay h2 {
    background: #000 none repeat scroll 0 0;
    color: tan;
    font-weight: 600;
    margin: 2rem 3rem 0;
    mix-blend-mode: overlay;
    padding: 5px 15px;
    text-align: center;
}
header {
    background:tan;
    position: fixed;
    width: 100%;
    text-align: center;
    color: white;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 0.5em;
}
nav a {
    color: inherit;
    padding: 0 12px;
    text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

Let me explain this code in steps to understand it easily. So Let's begin.

STEP 1: In the First Step, We are importing the fonts using the import property and then we are adding the background, margin, and font family to make stylish fonts, proper alignments, and attractive backgrounds.

Next, We just add out the width, height, top, and left for alignment then fix the position for absolute value lastly, we are adding the object properties which make the video user interactive and supportive.

The Code for the above Explanation.

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900);
* {
  box-sizing: border-box;
}

body {
    font-family: "Lato","Avenir Next",Arial,sans-serif;
  margin: 0;
  background: #000;
  background-size: cover;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
Enter fullscreen mode Exit fullscreen mode

STEP 2: In the second step we are making the text-align for the center and adding a background that is transparent and adding text color making it highlight a word that is overlaid from the video background. Some values like web kit, justified content to make it align to center and fixing it with the background.

Now we started styling the word for overlaying on it by adding background, font color, weight, margin, and mix blend mode so that the text overlay will be implemented. Add the value according to our requirements.

.overlay {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.overlay h2 {
    background: #000 none repeat scroll 0 0;
    color: tan;
    font-weight: 600;
    margin: 2rem 3rem 0;
    mix-blend-mode: overlay;
    padding: 5px 15px;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

STEP 3: In this last step we are styling the navigation bars by adding backgrounds and aligning them to the center then making attractive font colors with sizes. The code for the explanation is down.

header {
    background:tan;
    position: fixed;
    width: 100%;
    text-align: center;
    color: white;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 0.5em;
}
nav a {
    color: inherit;
    padding: 0 12px;
    text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

Now We have Successfully added the source code for the project. So we can now view the project in the given Output Section.

Now We have Successfully created our Text Overlay Video Using HTML & CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE - Code Convey

WRITTEN BY - Ragunathan S

Top comments (0)