How to Add a Video Background to Your Website Using HTML and CSS

In today’s digital era, adding a video background to your website can greatly enhance its visual appeal and engage your visitors. In this step-by-step tutorial, we will guide you through the process of adding a video background using HTML and CSS. By the end of this tutorial, you’ll be able to create a captivating website with a dynamic video background that leaves a lasting impression on your audience.

HTML Markup

To begin, open your preferred text editor and create a new HTML file. Copy and paste the following HTML code into your file:

<div class="video">
    <div class="slogan">
        <h1>Projects Engine</h1>
        <p>Thank you for choosing Projects Engine as your learning companion.</p>
    </div>
    <video autoplay muted loop plays-inline id="video_header">
        <source src="/wp-content/themes/buzzard/assets/videos/video.webm" type="video/webm"> Your browser does not support HTML5 video.
    </video>
</div>

CSS Styling

Next, let’s add the necessary CSS styles to create the video background effect. Copy and paste the following CSS code into your HTML file, within the <style> tags or an external CSS file:

.video {
    position: relative;
    width: 100%;
    height: 95vh;
    background: rgba(58, 65, 111, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slogan {
    text-align: center;
}

h1 {
    color: #fff;
    font-size: 60px;
    margin-bottom: 25px;
    display: block;
}

p {
    font-size: 30px;
    color: #fff;
    padding: 0 10px;
}

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

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

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

@media (max-width: 1024px) {
    .video {
        h1 {
            font-size: 40px;
            line-height: 60px;
            margin-bottom: 0;
        }

        p {
            font-size: 20px;
        }
    }
}

Understanding the Code

Let’s break down the CSS code to understand each section:

• The .video class is used to define the container for the video background. It is set to position: relative to allow the positioning of the video and other elements within it.
• The .slogan class styles the text content within the video container.
• The h1 and p selectors define the styles for the heading and paragraph text, respectively.
• The video selector positions the video element at the bottom right of the container using absolute positioning. It also sets the z-index to -1 to ensure it appears behind the other elements.
• The media queries handle responsive design by adjusting the video size and text styles based on the aspect ratio and screen width.

Customize the Video

To use your own video, replace the src attribute in the <source> tag with the URL or path to your video file. Make sure to provide alternative video formats for better browser compatibility.

Save and Test

Save your HTML file with a .html extension, and ensure that both the HTML and CSS files are in the same directory. Open the HTML file in a web browser, and you should see your website with a captivating video background and the slogan text overlay.

Conclusion

Congratulations! You have successfully added a video background to your website using HTML and CSS. By following this step-by-step tutorial, you have learned how to create an engaging and visually appealing website that will leave a lasting impression on your visitors. Experiment with different videos and customize the styling to match your website’s theme. Enjoy the process of creating a dynamic online presence with video backgrounds!