Create Responsive fullscreen HTML5 video background
HTML
<div class="description-video">
<p>The video is simple HTML5 video that used source element of HTML5. Have a look for details about <a href="http://codeconvey.com/fullscreen-html5-responsive-video-background/">Fullscreen Responsive Video</a> to know more about it.
</p>
</div>
<video autoplay poster="http://codeconvey.com/Tutorials/video-background-html5-responsive/images/poster.jpg" id="video by" loop>
<source src="http://codeconvey.com/Tutorials/video-background-html5-responsive/images/video.webm" type="video/webm">
<source src="http://codeconvey.com/Tutorials/video-background-html5-responsive/images/video.mp4" type="video/mp4">
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
CSS
body {
margin: 0;
background: #000;
}
video#videobg {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('images/poster.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.description-video {
color: #fff;
text-align: center;
font-family: 'Lato', Arial, sans-serif;
font-size: 20px;
line-height: 32px;
}
