How to add Background Video in HTML?

Hello coders, In this blog, you will learn to add background video in HTML. We will add a background video with the help of a video tag. The video will continuously run in the background once the user comes to your website. Let’s learn about it in detail:-

Background Video in HTML

To add a background video in HTML, create a File with an HTML extension and write all the basic HTML tags in it. Which are head, body, title, Html, and doctype. After writing this we will add a video tag in the Body section.

 

After adding the video tag in the body section we will add autoplay, loop & muted attributes to it. In the src tag of the video type the address of the video. Your background video code HTML is ready. If you want to add more content in the Body tag then add it and save your file with the same extension.

 

We will also add a CSS style sheet to it in the style tag under the head section. You can either use the same sheet or can customize it with your choice. 

The code to add background video in HTML is:-

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Background Video</title>
        <meta name=”viewport” content=”width=device-width, initial-scale=1″>
        <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            font-family: Arial;
            font-size: 17px;
        }
        #Video {
            position: fixed;
            right: 0;
            bottom: 0;
            min-width: 100%;
            min-height: 100%;
        }
        .content {
            position: fixed;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            color: whitesmoke;
            width: 100%;
            padding: 20px;
            }
        </style>
    </head>
    <body>
        <video autoplay muted loop id=”Video”>
            <source src=”coding.mp4″ type=”video/mp4″>
            Your browser does not support HTML5 video.
        </video>
        <div class=”content”>
            <h1>Code Blockx</h1>
            <h3>Solution for all Coding Problems</h3>
            <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p>
        </div>
    </body>
</html>

OUTPUT

Hope this blog was helpful to you and you got the answer to your question. You can also add Audio in HTML if you want to add it but don’t know how to then visit our detailed blog on it.

Thank you for visiting our blog. If you have any doubts about any coding questions then let us know in the comments section we will answer them as soon as possible.

Leave a Comment

Your email address will not be published. Required fields are marked *