How To Create Video Background with HTML & CSS

Video backgrounds have become more and more popular among website designers in recent years. With so much competition on the web, many websites are looking for new ways to set themselves apart from other sites. One way is with video backgrounds that can really make your site stand out amongst all of the other sites with plain text or still images.This article will show you how to create a video background with HTML and CSS.

How video background on a website helps?

If you have a video background on your website, it can set the mood for your site. For example, if you are an art-centered company or blog and want to display famous pieces of art throughout your site’s pages, adding video backgrounds will help do that. You could also use these in portfolio galleries or slideshows to create more dynamic layouts. This article is just one way to create the effect with HTML & CSS!

How To Create Video Background with HTML & CSS?

This tutorial will show you how to create a simple and modern looking background video that works well in portfolio galleries or slideshows by using only HTML and CSS. It includes some basic knowledge on the structure of both stylesheets as well as an explanation of what all this code is doing!

A common misconception people make when designing websites is thinking they need to use Photoshop in order to add texture or backgrounds such as videos; however, there are plenty of ways designers can achieve these effects without needing any advanced software! This particular technique involves using CSS video and background properties to create a seamless, animated experience for your visitors.

First off you’ll need some basic HTML knowledge and skills in order to start writing any code – this is how the page will be constructed on the server so it’s important that the structure of each element are correct. You can usually find this information about HTML by looking at an existing website or browser developer tools (usually CMD+I) > inspect element > view source text.

Next, we’ll add our first layer: section with class=”videoBG” which contains two child elements: “heading” and “video”. The videoBg contains video and some text which you want to show over the video background. These rules ensure that the content is still readable and everything else flows around it.

  
    <section class="videoBg">
        <h1>Video background</h1>
        <div class="container">
            <div class="colorOverlay"></div>
        <video autoplay loop muted>
            <source src="videoBg/Pexels Videos 1730393.mp4">
        </video>
        </div>
   </section>

Next, we will add our video in container class by using video element. If you want to play automatically add autoplay attribute to your video. Give loop a value if you want to play that video for a specific time. And don’t forget about to mute video.

Why we mute our video? Read this article to clarifications on mute video. It is google’s policy you can’t autoplay any video if it is not muted.

Next, we will add CSS for our video background’s position. We need to put this code to in our css file.

        
*{margin: 0;padding: 0;box-sizing: border-box;}

.videoBg{width:100%;height: 100vh; overflow: hidden;position:                 
        relative; display: flex; justify-content:center;align-items:  center;}

        video{width: 100%;}

        .videoBg h1{text-align: center;font-size: 6rem;background-color: #ffffff57; padding: 10px;z-index:1;}

        .container{position: absolute;top: 0;left: 0;width: 100%;}
        .colorOverlay{position: absolute;top: 0;left: 0;background-color: crimson;width: 100%; height: 100%; opacity: 0.5;}

Confused? don’t worry I will explain everything. First, we set a video background container, where we put our video and related text. Now we just set its position to relative. Here I used display property just for making for set text in the middle center. Justify-content and align-items help me in this. Set overflow hidden, So as video not to go out of the container.

This is how yours background look like. If you dont want to add overlay for video you can easily remove colorOverlay class.

 Video Background | How To Create Video Background with HTML & CSS

Conclusion

These techniques work best if you’re looking to create an interactive website experience with lots of motion graphics without using Flash which can be tricky to render.

In the next post, we’ll cover how you can make a responsive animated background so it looks great on all devices! For more tips and tricks read our latest article.

Leave a Comment