Complete source code to make Responsive Video Background in html
background_styles.css
@import url('https://fonts.googleapis.com/css?family=Raleway:400,600');
* {
font-family: Raleway;
}
html {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #DFDFDF;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="background_styles.css">
<link rel="stylesheet" href="styles.css">
<title>Responsive Video Background</title>
</head>
<body>
<div class="full-screen-video-container">
<video autoplay loop muted>
<source src="#" type="video/mp4" />
</video>
<div class="full-screen-video-content">
Paradise Awaits!
</div>
</div>
</body>
</html>
styles.css
html, body {
margin: 0;
}
.full-screen-video-container {
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-start;
}
.full-screen-video-container video {
z-index: -1;
position: absolute;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.full-screen-video-content {
background-color: white;
color: #333;
padding: 20px;
font-size: 70px;
margin-top: 100px;
}