How to add video background over a section?

Question

I'm trying to replace a header background image with a short video. I've searched a lot but couldn't find a proper solution to it.

I could find this article but couldn't do much with it as I'm still a novice in web development.

Can anyone please help me with the changes required in my code.

Here is a link to my Fiddle.

HTML:

        <section>   
            <header>
                <h1><strong>Header</strong></h1>
                <p>Lorem Ipsum</p>
            </header>
            <footer>
                <a href="#first" class="button scrolly">US</a>
                <a href="#second" class="button scrolly">UK</a>
                <a href="#fifth" class="button scrolly">India</a>
                <a href="#third" class="button scrolly">China</a>
                <a href="#fourth" class="button scrolly">Mongolia</a>

            </footer>
        </section>

CSS:

.dark {
    color: #aaa;
    color: rgba(255, 255, 255, 0.65);
}

#header {
    position: relative;
    margin: 0;
    background-image: url("http://www.mygreencity.in/images/slider/1.jpg");
    background-size: auto, cover;
    background-position: top left, center center;
    background-repeat: repeat, no-repeat;
    padding: 14em 0 14em 0;
    text-align: center;
    color: #fff;
}

    #header header h1 {
        font-size: 2.25em;
        line-height: 1.25em;
        margin-bottom: 0;
    }

    #header header p {
        margin-top: 1.25em;
        font-weight: 100;
        padding: 0;
        font-size: 1.25em;
        line-height: 1.5em;
        text-align: center;
    }

    #header footer {
        padding-top: 1.5em;
    }

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
    -moz-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    -webkit-appearance: none;
    position: relative;
    display: inline-block;
    background: #3d3d3d;
    padding: 0.85em 3em 0.85em 3em;
    border-radius: 0.25em;
    cursor: pointer;
    border: 0;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    button:hover,
    .button:hover {
        background: #4f4f4f;
    }

    input[type="button"].alt,
    input[type="submit"].alt,
    input[type="reset"].alt,
    button.alt,
    .button.alt {
        color: inherit;
        box-shadow: inset 0 0 0 1px #e6e6e6;
        background: none;
    }

        input[type="button"].alt:hover,
        input[type="submit"].alt:hover,
        input[type="reset"].alt:hover,
        button.alt:hover,
        .button.alt:hover {
            background: rgba(0, 0, 0, 0.025);
        }

.dark input[type="button"],
.dark input[type="submit"],
.dark input[type="reset"],
.dark button,
.dark .button {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 0 1px #fff;
    color: #fff;
}

    .dark input[type="button"]:hover,
    .dark input[type="submit"]:hover,
    .dark input[type="reset"]:hover,
    .dark button:hover,
    .dark .button:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    .dark input[type="button"].alt,
    .dark input[type="submit"].alt,
    .dark input[type="reset"].alt,
    .dark button.alt,
    .dark .button.alt {
        background: none;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    }

        .dark input[type="button"].alt:hover,
        .dark input[type="submit"].alt:hover,
        .dark input[type="reset"].alt:hover,
        .dark button.alt:hover,
        .dark .button.alt:hover {
            background: rgba(255, 255, 255, 0.15);
            box-shadow: inset 0 0 0 1px #fff;
        }

Answer 1

You could use the jquery videoBG plugin: http://syddev.com/jquery.videoBG/

Or you could add the following code: https://jsfiddle.net/5oxjuyum/1/

The alternative image is displayed when the browser doesn't support the video.

HTML

<video id="video" autoplay>
    <source src="video.mp4" type="video/mp4" />
    <img id="alternative" src="http://www.mygreencity.in/images/slider/1.jpg" />
</video>

CSS

#video, #alternative {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Answer 2

https://css-tricks.com/snippets/jquery/append-site-overlay-div/

$(function() {



var docHeight = $(document).height();

   $("body").append("<div id='overlay'>VIDEO TAG</div>");

   $("#overlay")
      .height(docHeight)
      .css({
         'opacity' : 0.4,
         'position': 'absolute',
         'top': 0,
         'left': 0,
         'background-color': 'black',
         'width': '100%',
         'z-index': 5000
      });

});