ADVERTISEMENT

Create Text Overlay on Video Using HTML and CSS

Telegram Group Join Now

ADVERTISEMENT

Create Text Overlay on Video Using HTML and CSS

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Text Overlay Video Using HTML and CSS

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

Code byCode Convey
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNO
ResponsiveYes
Text Overlay on Video Table

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>

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.

ADVERTISEMENT

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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.

ADVERTISEMENT

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

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.

ADVERTISEMENT

50+ Html ,Css & Javascript Projects With Source Code

ADVERTISEMENT

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

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

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

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

ADVERTISEMENT

FINAL OUTPUT Of Text Overlay on Video Using HTML and CSS

ADVERTISEMENT

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.

ADVERTISEMENT

10+ Javascript Project Ideas For Beginners( Project Source Code)

ADVERTISEMENT

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.

ADVERTISEMENT

REFER CODE – Code Convey

WRITTEN BY – Ragunathan S

Which code editor do you use for this Text Overlay on Video coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

YES! this is a responsive project

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT