background-video
Version:
backgroundVideo makes your HTML5 `<video>` behave like the CSS property `background-size: cover`, making it fully responsive and scaling to aspect ratio. backgroundVideo also has parallax options.
34 lines (30 loc) • 441 B
CSS
main {
position: relative;
}
/* Video wrap */
.bv-video-wrap {
width: 100%;
height: 100%;
display: none;
}
.bv-video-wrap--ready {
display: block;
}
.bv-video-wrap::before {
/* Optional overlay */
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 10;
}
/* Video object */
.bv-video {
width: 100%;
height: 100%;
}