How to create a full width background video banner?

Date: February 25th, 2020
Category: Questions, 243 Views

Asked by: Rathi, Location: Ipoh, Malaysia

Hi Manish,

I am using bootstrap4 for creating a project. I need to know How to create a full width background video banner in header? I tried but that’s not visible in mobile, it’s showing a blank space instead of video banner.


Answer

Hey Rathi,

You are doing great.  Add the codes to your web-page as below and replace ‘#’ with your video path.

							
HTML- <header> <div class="overlay"></div> <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"> <source src="#" type="video/mp4"> </video> <div class="container h-100"> <div class="d-flex h-100 text-center align-items-center"> <div class="w-100 text-white"> <h1 class="display-3">Video Banner</h1> <p class="lead mb-0">Some content here</p> </div> </div> </div> </header> CSS- header { position: relative; background-color: black; height: 75vh; min-height: 25rem; width: 100%; overflow: hidden; } header video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; 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%); } header .container { position: relative; z-index: 2; } header .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: black; opacity: 0.5; z-index: 1; }
Share my post: 

One response to “How to create a full width background video banner?”

Leave a Reply

Your email address will not be published. Required fields are marked *