Fullscreen background has become very popular in web design lately. Fullscreen images used as backgrounds have an amazing visual impact. So, in this tutorial we will show you how to add fullscreen background video using HTML5 and CSS.You may also like custom video player using HTML5. You may also like How to Get Thumbnail From Youtube Video Using PHP and How to Full Page Background Image Using HTML And CSS.
HTML and CSS Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="video_style.css">
</head>
<style>
body
{
text-align:center;
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
}
#video_wrapper
{
margin:0px;
padding:0px;
}
#video_wrapper video
{
position: fixed;
top: 50%; left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
#wrapper
{
position:relative;
text-align:center;
margin:0 auto;
padding:0px;
width:995px;
z-index:2;
}
h1
{
margin-top:250px;
color:white;
font-size:45px;
background-color: rgba(112, 112, 112, 0.74);
}
</style>
<body>
<div id="video_wrapper">
<video autoplay muted loop>
<source src="SampleVideo_1280x720_1mb.mp4" type="video/mp4">
</video>
<div id="wrapper">
<h1>FullScreen Background Video </h1>
</div>
</div>
</body>
</html>