How to Add Background Video to an HTML Page

To add a background video to an HTML page, you can use the <video> element. Here's an example code:

    
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Background Video</title>
        <style>
            body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            }
            #video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            }
            #video-background video {
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            }
            .content {
            position: relative;
            z-index: 1;
            color: white;
            text-align: center;
            padding: 20px;
            }
        </style>
    
    
        <div id="video-background">
            <video autoplay="" muted="" loop="">
                <source src="yourvideo.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
        </div>
        <div class="content">
            <h1>Your Content Goes Here</h1>
            <p>This is your page content.</p>
        </div>
    

In this code, the <video> element is placed inside a <div> with a fixed position that covers the entire page. Styles are applied to position the video in the background and the content in the foreground. Don't forget to replace "yourvideo.mp4" with the path to your video file.