Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap 4 Jumbotron Video
.jumbotron-video {
/* must set this so we can use position: absolute next */
position: relative;
/* don’t let video exceed the boundaries we set */
overflow: hidden;
/* show users more of page below the hero */
height: 80vh;
}
.jumbotron-video video {
/* ↓ take video out of flow */
position: absolute;
/* ↓ make sure video is behind content, which has z-index of 20 */
z-index: 10;
/* ↓ place video in area */
top: 0;
/* ↓ object-fit is not supported on IE */
object-fit: cover;
/* ↓ make video fill the area */
min-width: 100%;
min-height: 100%;
/* ↓ set opacity to see text */
opacity: .6;
/* ↓ prevent browser from distorting video */
width: auto;
height: auto;
}
.jumbotron-video .container {
z-index: 20;
position: relative;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment