Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Video Carousel

Carousel – advanced options


Written by Michal Szymanski ,


Final result preview
Previous lesson Live preview

In this lesson we are going to play with the carousel, we've built in the previous tutorial. First, we'll change the image carousel to video carousel.

1. Remove the following lines of code from your style.css:


.carousel-item:nth-child(1) {
    background-image: url("https://mdbootstrap.com/images/regular/nature/img%20(54).jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.carousel-item:nth-child(2) {
    background-image: url("https://mdbootstrap.com/images/regular/nature/img%20(4).jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.carousel-item:nth-child(3) {
    background-image: url("https://mdbootstrap.com/images/regular/nature/img%20(3).jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

2. In style.css set a proper size to the new Carousel by adding code below:


.carousel .carousel-item video {
    width: 100%;
    height: auto;
}

3. Go to the CAROUSEL section and grab the code of the Video Carousel with the Caption.

Then paste its code instead of existing Carousel.


<!--Carousel Wrapper-->
<div id="video-carousel-example2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
    <!--Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#video-carousel-example2" data-slide-to="0" class="active"></li>
        <li data-target="#video-carousel-example2" data-slide-to="1"></li>
        <li data-target="#video-carousel-example2" 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-black-light">

                <!--Video source-->
                <video class="video-fluid" autoplay loop>
                    <source src="https://mdbootstrap.com/images/video/Strum-Away.mp4" type="video/mp4" />
                </video>
                <div class="full-bg-img"></div>
            </div>

            <!--Caption-->
            <div class="carousel-caption">
                <div class="animated fadeInDown">
                    <h3 class="h3-responsive">Light mask</h3>
                    <p>Secondary text</p>
                </div>
            </div>
            <!--Caption-->
        </div>
        <!--/First slide-->

        <!--Second slide-->
        <div class="carousel-item">
            <!--Mask color-->
            <div class="view hm-black-slight">
                <!--Video source-->
                <video class="video-fluid" autoplay loop>
                    <source src="https://mdbootstrap.com/images/video/Beach-Ball.mp4" type="video/mp4" />
                </video>
                <div class="mask"></div>
            </div>

            <!--Caption-->
            <div class="carousel-caption">
                <div class="animated fadeInDown">
                    <h3 class="h3-responsive">Super light mask</h3>
                    <p>Secondary text</p>
                </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-fluid" autoplay loop>
                    <source src="https://mdbootstrap.com/images/video/Nature-Sunset.mp4" type="video/mp4" />
                </video>
                <div class="mask"></div>
            </div>

            <!--Caption-->
            <div class="carousel-caption">
                <div class="animated fadeInDown">
                    <h3 class="h3-responsive">Strong mask</h3>
                    <p>Secondary text</p>
                </div>
            </div>
            <!--Caption-->
        </div>
        <!--/Third slide-->
    </div>
    <!--/.Slides-->

    <!--Controls-->
    <a class="carousel-control-prev" href="#video-carousel-example2" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#video-carousel-example2" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>    <!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->

Save the file and refresh your browser. Now you can admire your new video carousel. That was easy, wasn't it?

Now let's check what exactly has happened here.

We've removed images from style.css and place videos in index.html. Despite this, our carousel is still filling 100% of available space, and it fits even when we resize the browser.

This works because we set a height of the video to 100% of available space, and width: auto, which means that it will adjust to the size of the video itself.

If you want to change a displaying video you do it by modifying URL path in index.html:


<video class="video-fluid" autoplay loop>
    <source src="https://mdbootstrap.com/images/video/Strum-Away.mp4" type="video/mp4" />
</video>

There is still one thing which we should fix - our Caption is too small and isnt't placed exactly in the middle of the screen.

4. Replace the code of Caption in each slide as per following example:


<!--Caption-->
<div class="carousel-caption">
    <div class="flex-center animated fadeInDown">
        <ul>
            <li>
                <h1 class="h1-responsive">Material Design for Bootstrap 4</h1></li>
            <li>
                <p>The most powerful and free UI KIT for Bootstrap</p>
            </li>
            <li>
                <a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg">Sign up!</a>
                <a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg">Learn more</a>
            </li>
        </ul>
    </div>
</div>
<!--Caption-->

5. Add a following code to the style.css:


.carousel-caption {
    height: 100%;
    padding-top: 7rem;
}

As you can see, we use class .flex-center (similar to the carousel in the previous tutorial) to center the content. But this time it's not enough, and without additional CSS code, it aligns the content only horizontally (but not vertically).

That's because the parent of the .flex-center div doesn't have a value height: 100%.

If you remember, in the previous lesson we had to set the height of each parent equal to 100%. This time we have one parent more (.carousel-caption). When we set its height to 100% everything is fine.

Small padding-top: 7rem; just makes it looks better on smaller screens.

Note: Because we use a Mask in our Carousel, you can easily manipulate the color and intensity of the video, to make your caption more or less visible.

To learn more about Mask take a look at MASKS documentation.


If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next tutorial

Do you want to share?


About author


User avatar

Michal Szymanski

UI/UX designer, entrepreneur, web developer, marketing analyst. In love with javascript, material design, big data and marketing automation.

Comments 14

  • User avatar

    James

    Am still moving.. Design process is becoming simplified than ever. How good is this? Congrats for the nice work you have done Michal

  • Ramesh Kaamarthi

    Hi Michal, MDB is amazing. It made wed designing very easy. keep it up.

  • User avatar

    steffenvetrhus1

    The link to the previous example is broken :) Links to this page.

  • User avatar

    steffenvetrhus1

    In this lesson we are going to play with the carousel we've built in the previous tutorial. First, we'll change the image carousel to video carousel. The link in this text :P

  • User avatar

    Alex B.

    It is possible to take an interest concerning background-video. It was so conceived or makes a few other sense. You gave CSS style: .carousel .carousel-item video { height: 100%; width: auto; } Result - a screenshot 1 http://prnt.sc/c8syke And if to trade places of width and height, .carousel .carousel-item video { width: 100%; height: auto; } Result - a screenshot 2 http://prnt.sc/c8sz2g

  • User avatar

    David

    The carousel isn't auto scrolling

  • User avatar

    Bartłomiej Malanowski

    @David, it's because the carousel isn't initialized. Check the docs

  • User avatar

    Pablo

    Hi guys: I have a doubt with the space in the right side under the right arrow. That is normal? I mean, that´s right? Thank you!

  • User avatar

    Rudra Kishore

    This example working correctly on IE but not on latest Chrome browser.

  • User avatar

    Bartłomiej Malanowski

    @Rudra Kishore, I just checked on the latest Chrome and cannot see the problem. Could you please send me an email at b.malanowski@mdbootstrap.com with more details?

  • User avatar

    Cromartie

    @alexB. you need this .carousel .carousel-item video { height: auto; width: 100%; } and the inverse when screen under 768px

  • User avatar

    Yaum Kumar Verma

    Hi Michal Szymanski, Is there any code in mdb bootstrap for video gallery like : http://kathakacademy.com/gallery/ But i want to make responsive like this link i have given to you

  • User avatar

    yaum.verma

    Sorry its a photo galley not video gallery

  • User avatar

    Kamil Paciepnik

    Hi yaum, If you have any problem with carousel please write to me on e-mail - k.paciepnik@mdbootstrap.com

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.