How to Add Video in Website Background | How to make webpage background beautiful | Add Video in Webpage Background

Hello Friends

 In this article i am going to tell you how to add a video and your webpage background.
as everybody want that their website should look awesome and presentable and the most important part of a website is background, so many people use background image, background color etc. but what if we have a beautiful video that can make our website more beautiful.

So here the solution how to add video in website background.

 Here is the first things.
Add following Code in your body tag, here i gave video name is Bubbles.mp4, you can give any name of your video.

<video autoplay loop poster="polina.jpg" id="bgvid">

    <source src="Bubbles.mp4" type="video/mp4">
</video>

Now Add following css in your page this css code is not that long so if you want you can keep this css code in head section also. or if you want to keep this css code in any external stylesheet you can do this too, just copy that following code and paste in your stylesheet.


    <style type="text/css">
    video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}
    </style>


Thats it, this is a very simple code to keep a video in your website as background.

if you have any question about. or not able to setup video in your website background just write in comment box i will reply your question as soon as possible.