Video Carousel - When I add my own high resolution video it


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

Video Carousel - When I add my own high resolution video it does not fill the full width of the screen.  The video is shorter in both width and height. The first slide is the one with the video that is not working correctly. Here is the code:
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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No