Bootstrap Snippet Background overlay video bootstrap using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section>
section
<div class="overlay-vid">Overlay</div>
                <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
                        video
                        <source src="mp4 video link here" type="video/mp4">
                </video>
                <div class="d-flex h-100 text-center align-items-center">
                <div class="container h-100">
    <div class="  text-center align-items-center">
      <div class="w-100 text-white">
        <h1>Heading 1</h1>
       <p>Please replace video link video tag to work background video</p>
      </div>
    </div>
  </div>
</section>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
section {
        position: relative;
        background-color: rgb(109, 7, 7);
        height: 100%;
        min-height: 25rem;
        width: 100%;
        overflow: hidden;
      }
    section .overlay-vid {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: black;
        opacity: 0.5;
        z-index: 1;
      }
      
      
      section video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: 100%;
        
        z-index: 0;
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
      }
      
      section .container {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Background overlay video bootstrap"
Bootstrap 4.1.1 Snippet by skjalal99

Related: See More

Questions / Comments:

"Background overlay video bootstrap" Bootstrap 4.1.1 Snippet by skjalal99

Related: See More

Questions / Comments:

"Background overlay video bootstrap"
Bootstrap 4.1.1 Snippet by skjalal99