Bootstrap Snippet Parallax video with text using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="videocontainer">
<video autoplay loop muted poster="screenshot.jpg" id="background">
    <source src="https://bufiles.blob.core.windows.net/co3615/video/explore.webm">
</video>
<h1 style="color: white; font-size: 5em; text-align: center; top:36%; left: 40%; position: fixed; z-index: -99; font-family: serif;">MENU</H1>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#background {
height: 25vh;
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url("https://bufiles.blob.core.windows.net/co3615/slide/overlay.png") left center;
    background-size: cover;
}
.container h1 {
  color: white;
}
.videocontainer {
height: 35vh;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Parallax video with text"
Bootstrap 3.3.0 Snippet by Harut

Related: See More

Questions / Comments:

"Parallax video with text" Bootstrap 3.3.0 Snippet by Harut

Related: See More

Questions / Comments:

"Parallax video with text"
Bootstrap 3.3.0 Snippet by Harut