<div id="video-container">
<div class="video-overlay"></div>
<div class="video-content">
<div class="inner">
<h1>Full screen video background</h1>
<button>Discover</button>
</div>
</div>
<video autoplay loop src="https://static.videezy.com/system/resources/previews/000/002/648/original/kuala-lumpur-timelapse.mp4"></video>
</div>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body {
font-family: Montserrat;
}
* { padding: 0; margin: 0 }
body, html {
height: 100%;
min-height: 100%;
}
#video-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#video-container video,
.video-overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
}
#video-container .video-overlay {
z-index: 9999;
background: rgba(0,0,0,.5);
}
#video-container .video-content {
z-index: 99999;
position: absolute;
height: 100%;
width: 100%;
}
#video-container .video-content .inner {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column wrap;
}
#video-container .video-content .inner h1 {
color: white;
margin: 20px 0;
font-size: 3em;
}
#video-container .video-content .inner button {
background: #03A9F4;
border: none;
color: white;
padding: 20px 30px;
border-radius: 5px;
text-transform: uppercase;
cursor: pointer;
font-family: inherit;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.