Topic: Video Carousel - When I add my own high resolution video it does not fill the full width of screen
iliketheinterwebs pro asked 7 years ago
Start your code here<!--Carousel Wrapper--> <div id="video-carousel-example" class="carousel slide carousel-fade" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#video-carousel-example" data-slide-to="0" class="active"></li> <li data-target="#video-carousel-example" data-slide-to="1"></li> <li data-target="#video-carousel-example" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!-- First slide --> <div class="carousel-item active"> <!--Mask color--> <div class="view hm-indigo-light"> <!--Video source--> <video class="video-full" autoplay loop> <source src="https://mdbcdn.b-cdn.net/img/video/Tropical.mp4"/> <!-- <source src="vid/permit-carousel-1.mov" type="video/mp4" />--> </video> <div class="full-bg-img"></div> </div> <!--Caption--> <div class="carousel-caption"> <div class="flex-center animated fadeInDown"> <ul> <li> <h1 class="h1-responsive">Papahānaumokuākea Permitting</h1></li> <li> <p>Create, submit, and track your permits, all in one place.</p> </li> <li> <a target="_blank" href="#" class="btn btn-warning btn-lg">Create Account</a> <a target="_blank" href="#" class="btn btn-default btn-lg">Log In</a> </li> </ul> </div> </div> <!--Caption--> </div> <!-- /.First slide --> <!-- Second slide --> <div class="carousel-item"> <!--Mask color--> <div class="view hm-purple-slight"> <!--Video source--> <video class="video-full" autoplay loop> <source src="https://mdbcdn.b-cdn.net/img/video/animation-intro.mp4" type="video/mp4" /> </video> <div class="mask"></div> </div> <!--Caption--> <div class="carousel-caption"> <div class="flex-center animated fadeInDown"> <ul> <li> <h1 class="h1-responsive">Papahānaumokuākea Permitting</h1></li> <li> <p>Create, submit, and track your permits, all in one place.</p> </li> <li> <a target="_blank" href="#" class="btn btn-warning btn-lg">Create Account</a> <a target="_blank" href="#" class="btn btn-default btn-lg">Log In</a> </li> </ul> </div> </div> <!--Caption--> </div> <!-- /.Second slide --> <!-- Third slide --> <div class="carousel-item"> <!--Mask color--> <div class="view hm-black-strong"> <!--Video source--> <video class="video-full" autoplay loop> <source src="https://mdbcdn.b-cdn.net/img/video/forest.mp4" type="video/mp4" /> </video> <div class="mask"></div> </div> <!--Caption--> <div class="carousel-caption"> <div class="flex-center animated fadeInDown"> <ul> <li> <h1 class="h1-responsive">Papahānaumokuākea Permitting</h1></li> <li> <p>Create, submit, and track your permits, all in one place.</p> </li> <li> <a target="_blank" href="#" class="btn btn-warning btn-lg">Create Account</a> <a target="_blank" href="#" class="btn btn-default btn-lg">Log In</a> </li> </ul> </div> </div> <!--Caption--> </div> <!-- /.Third slide --> </div>
Marta Szymanska staff pro premium answered 7 years ago
Hi,
these videos on our carousel live preview have 100% height and width but their ratio does not allow for full video height. Look here: https://mdbootstrap.com/previews/docs/latest/html/carousel/video/index.html, this carousel works fine.
Best,
Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No