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://mdbootstrap.com/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://mdbootstrap.com/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://mdbootstrap.com/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>

---