How to add video background over a section? - css

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>
US
UK
India
China
Mongolia
</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
});
});