Physical Address

Godawari 2 Attariya Kailali

Create a Stunning Background Video effect with HTML and CSS

Hello, learner. Today, in this blog post, we will create a Background Video effect with HTML and CSS.  In the past post, we have created many projects, one of them is Glowing Neon Social Media Button. It is time to Background Video effect without wasting time.

Create a Stunning Background Video effect with HTML and CSS

There are only two sections for creating the staining Background Video Effect One is for Importing the Video from the computer and another for text over the Video. We have looped, autoplay, and Muted the video. In the CSS section, we have done the text hover with the background. We have placed the video in full-width

From this simple project, you will know how to add video in the background and How to write text over the Video

If you’re having difficulty understanding what I’m saying or what this Background Video effect is, you can ask me in the comments as well on social media.

Code ByCoding thai
Language UsedHTML And CSS
ResponsiveYes
External Link / DependenciesYes

There are three types of styles to connect CSS with HTML files: inline CSS, Internal CSS, and External CSS. For Inline CSS, we have to write the CSS code inside the HTML code using style Attribute elements. We have to use the Style tag in the Head section of the HTML File for internal CSS. We have used this internal CSS in the section below. Last is External CSS. We have to create another CSS File in the same folder for this.

Preview of Background Video Effect

In this preview, we have used internal CSS in the code. We must write the code in the head section using the Style tag in the internal CSS. We must write the code in <Style> CSS code </style> in the Head section in the HTML file. This code is run in Codepen.io.

See the Pen Staining Back ground Video by Coding thai (@Codingthai) on CodePen.

You might like this

Create a Stunning Background Video effect with HTML and CSS [Source code]

To create the Background Video effect first, you must create two files (HTML and CSS) named index.html and style.css in the same folder and link the CSS files to HTML. After that, paste the code below, the HTML code in index.html, and the PAE CSS code in style.css. That’s all after pasting the code.

First, create an HTML file named index.html, paste the HTML code below, and save it. Remember to give the file a .html extension.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Background Video</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="hero">
      <video autoplay loop muted plays-inline class="back-video">
        <!-- change the video to your own -->
        <source src="assets/video.mp4" />
      </video>

      <section class="content">
        <h1>Journey</h1>
        <a href="">Explore</a>
      </section>
    </section>
  </body>
</html>

After pasting the HTML code, you must create a second CSS file named style.css. Paste the code below on it and save it. Again, remember to give the CSS file a .css extension.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.hero {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(12, 3, 51, 0.3), rgba(12, 3, 51, 0.3));
  position: relative;
  padding: 0 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  text-align: center;
}

.content h1 {
  font-size: 160px;
  color: #fff;
  font-weight: 600;
  transition: 0.5s;
}

.content h1:hover {
  -webkit-text-stroke: 2px white;
  color: transparent;
}

.content a {
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-size: 24px;
  border: 2px solid white;
  padding: 14px 50px;
  margin-top: 20px;
  transition: 0.5s;
}

.content a:hover {
  background: #fff;
  color: #000;
}

.back-video {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}

@media (min-aspect-ratio: 16/9) {
  .back-video {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  .back-video {
    width: auto;
    height: 100%;
  }
}

That’s all. After pasting the code, your code will be successfully run. If you get any error/problem in the code, just comment or contact me on social media.

Output Result

Conclusion

After creating this Animated Sign and Login Page, you can easily create one. This project will also teach you about different properties of CSS. How to do animation on CSS

Written By@codewithmaya
Code By Coding thai

Related Posts