How To Add Video Background In Website Using HTML And CSS

Share this Article
Reading Time: 4 minutes
356 Views

Inside this article we will see the concept i.e How To Add Video Background In Website Using HTML and CSS. Article contains classified information about adding youtube video to web page background using the concept of CSS.

If you are looking for a solution where you can easily add a running youtube video as a background using html and css then this article will help you a lot to implement this.

This article contains the full information about HTML and CSS used for adding youtube video into background. We are not using any third party plugins for this.

Learn More –

Let’s get started.

Application Programming

Create a file index.html inside your project folder. Open index.html and write this following code into it.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>How To Add Video Background In Website Using HTML And CSS</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }
        
        .video-background {
            background: #000;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -99;
        }
        
        .video-foreground,
        .video-background iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        #vidtop-content {
            top: 0;
            color: #fff;
        }
        
        .vid-info {
            margin: 50px auto;
            width: 33%;
            background: rgb(59 71 212 / 30%);
            color: #fff;
            padding: 1rem;
            font-family: Avenir, Helvetica, sans-serif;
        }
        
        .vid-info h1 {
            font-size: 2rem;
            font-weight: 700;
            margin-top: 0;
            line-height: 1.2;
        }
        
        .vid-info a {
            display: block;
            color: #fff;
            text-decoration: none;
            background: rgba(0, 0, 0, 0.5);
            transition: .6s background;
            border-bottom: none;
            margin: 1rem auto;
            text-align: center;
        }
        
        @media (min-aspect-ratio: 16/9) {
            .video-foreground {
                height: 300%;
                top: -100%;
            }
        }
        
        @media (max-aspect-ratio: 16/9) {
            .video-foreground {
                width: 300%;
                left: -100%;
            }
        }
        
        @media all and (max-width: 600px) {
            .vid-info {
                width: 50%;
                padding: .5rem;
            }
            .vid-info h1 {
                margin-bottom: .2rem;
            }
        }
        
        @media all and (max-width: 500px) {
            .vid-info .acronym {
                display: none;
            }
        }
    </style>
</head>

<body>

    <div class="video-background">
        <div class="video-foreground">
            <iframe src="https://www.youtube.com/embed/d649GL3FKaU?controls=0&showinfo=0&rel=0&autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

    <div id="vidtop-content">
        <div class="vid-info">
            <h1>YouTube Fullscreen Background Demo</h1>
            <p>
                Online Web Tutor is web development community found by Sanjay Kumar. It provides web development course for free worldwide by professionally trained instructors
            </p>
        </div>
    </div>


</body>

</html>

Concept of Iframe

Here,

We have used Iframe element to display youtube video into web page. In the given code Youtube Video ID: d649GL3FKaU, you can replace with your video ID.

<iframe src="https://www.youtube.com/embed/<VIDEOID>?controls=0&showinfo=0&rel=0&autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe>

Application Testing

Now,

Open project into browser.

URL: http://localhost/index.html

We hope this article helped you to learn How To Add Video Background In Website Using HTML And CSS Tutorial in a very detailed way.

Buy Me a Coffee

Online Web Tutor invites you to try Skillshare free for 1 month! Learn CakePHP 4, Laravel APIs Development, CodeIgniter 4, Node Js, etc into a depth level. Master the Coding Skills to Become an Expert in Web Development. So, Search your favourite course and enroll now. Click here to join.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Was this post helpful?

Learn Web Development Courses Risk Free @ $5 only.
Web Development Courses @ $5