How To Make A Website With Background Video Effects | HTML & CSS

Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS & JavaScript) tutorials. 

Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.

You can also visit my GitHub where I upload all the code I have.

In this tutorial topic "How To Make A Website With Background Video Effects | HTML & CSS", we will learn how to create it following these simple easy steps. From the header navigation to the footer element, we will dissolve all of them here.

Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments. 

Get Source Code.

If interested in watching the video before running the code below, you can click the play button to get started.

Code Begins

1. First, create a folder with any name you like. Then, make the necessary files inside it.
2. Create a file called index.html to serve as the main file.
3. Create a file called style.css for the CSS code.
4. Finally, download the Video and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.

To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout. 

HTML

<div class="video-container">
      <div class="overlay"></div>
      <video autoplay loop muted>
        <source src="vid.mp4" type="video/mp4" />
        Your browser does not support the video tag.
      </video>
    </div>
    <header>
      <h1>Byte<span>Wave.</span></h1>
      <ul>
        <li><a href="#">Home</a></li>
        <li class="about">
          <a href="#">About Us</a>
          <ul id="drop1">
            <li><a href="#">About Us 1</a></li>
            <li><a href="#">About Us 2</a></li>
            <li class="about3">
              <a href="#">About Us 3</a>
              <ul id="drop2">
                <li><a href="#">About Us 4</a></li>
                <li><a href="#">About 5</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="features">
          <a href="#">Features</a>
          <ul>
            <li><a href="#">Features 1</a></li>
            <li><a href="#">Features 2</a></li>
            <li><a href="#">Features 3</a></li>
          </ul>
        </li>
        <li><a href="#">Gallery</a></li>
        <li class="contact"><a href="#">Contact Us</a></li>
      </ul>
    </header>
    <div class="hero">
      <h1>Welcome to our sweet <span>transformation</span></h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error veniam
        atque voluptatum maxime animi deserunt dolore. Officia officiis, placeat
        quidem nobis nemo eligendi enim voluptatem!
      </p>
      <button>
        Explore More <ion-icon name="arrow-forward-outline"></ion-icon>
      </button>
    </div>

Add the following CSS codes to your style.css file to make your website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website. 

CSS

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

.video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1; /* Send it behind other content */
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-container .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15%;
  padding-top: 30px;
  color: #fff;
}

header h1 {
  font-size: 1.8em;
}

header h1 span {
  color: rgb(17, 255, 17);
}

header ul li {
  position: relative;
  list-style: none;
  display: inline;
  margin: 0 20px;
}

header ul li.contact > a {
  background: rgb(17, 255, 17);
  color: #fff;
  padding: 5px 10px;
  border-radius: 20px;
}

header ul li a {
  color: #fff;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 20px;
  transition: 0.3s ease;
}

header li a:hover {
  background: rgb(17, 255, 17);
  color: #fff;
}

header ul li.about a:hover {
  background: transparent;
  color: rgb(17, 255, 17);
}

header ul li.about ul {
  position: absolute;
  left: 0;
  width: 130px;
  background: rgb(17, 255, 17);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: 0.5s ease;
}

header ul li.about ul li {
  position: relative;
  display: block;
  margin: 0;
  padding: 10px 0;
  text-align: center;
}

header ul li.about ul li a {
  padding: 0;
  border-radius: 0;
}

header ul li.about ul li:hover {
  background: #fff;
}

header ul li.about ul li:hover > a {
  color: rgb(17, 255, 17);
  background: transparent;
}

header ul li.about:hover ul {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

header ul li.about ul li.about3 ul {
  position: absolute;
  left: 100%;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: 0.5s ease;
}

header ul li.about ul li.about3:hover ul {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

header ul li.features a:hover {
  background: transparent;
  color: rgb(17, 255, 17);
}

header ul li.features ul {
  position: absolute;
  left: 0;
  width: 130px;
  background: rgb(17, 255, 17);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: 0.5s ease;
}

header ul li.features ul li {
  position: relative;
  display: block;
  margin: 0;
  padding: 10px 0;
  text-align: center;
}

header ul li.features ul li a {
  border-radius: 0;
  padding: 0;
}

header ul li.features:hover ul {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

header ul li.features ul li:hover {
  background: #fff;
}

.hero {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #fff;
}

.hero h1 {
  font-size: 2.8em;
  text-transform: capitalize;
}

.hero h1 span {
  color: rgb(17, 255, 17);
}

.hero p {
  max-width: 800px;
  width: 100%;
  margin: 30px auto;
  line-height: 1.7em;
}

.hero button {
  padding: 10px 20px;
  border-radius: 30px;
  cursor: pointer;
  background: rgb(17, 255, 17);
  color: #fff;
  border: none;
  font-size: 1em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 auto;
  transition: transform 0.5s ease;
}

.hero button ion-icon {
  font-size: 1.5em;
}

.hero button:hover {
  transform: scale(1.2);
}

Conclusion and Final word

Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can " Make A Website With Background Video Effects | HTML & CSS". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.

Happy Coding Journey 🚀