video-html5

Insert video as background or wallpaper on your website with Html5 fullscreen

Today we have very fashionable to embed videos as background instead of an image, well here you have do is very simple as we only have to worry about HTML5 tags and just with these lines of code we have it ready.

Here the html5 code that will help us to embed the video.

<video autoplay="autoplay" loop="loop" id="video_background" preload="auto" volume="50"/>   <source src="/url/tuvideo.mp4" type="video/mp4" /> </video/>
And here the css code that will position the video at the bottom of screen and make it fullscreen.

#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
#video_pattern {
background:#fff;
position: fixed;
opacity: 0.8;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
}