Reading Time: 4 minutes

1,611 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.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

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.