Angular Bootstrap video

Angular Video - Bootstrap 4 & Material Design

Angular Bootstrap video is a collection of componens which allow to present content in video format.

It can be resized as desired, and thank to Bootstrap responsiveness, it will adjust to the screen size.

Examples of Angular Bootstrap video use:

  • Trip video on travel blog
  • Company promotional video as background

See the following Angular Bootstrap video examples:


Responsive video

Aspect ratios can be customized with modifier classes.


    <!-- 21:9 aspect ratio -->
    <div class="embed-responsive embed-responsive-21by9">
      <iframe class="embed-responsive-item" src="..."></iframe>
    </div>

    <!-- 16:9 aspect ratio -->
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="..."></iframe>
    </div>

    <!-- 4:3 aspect ratio -->
    <div class="embed-responsive embed-responsive-4by3">
      <iframe class="embed-responsive-item" src="..."></iframe>
    </div>

    <!-- 1:1 aspect ratio -->
    <div class="embed-responsive embed-responsive-1by1">
      <iframe class="embed-responsive-item" src="..."></iframe>
    </div>
                

Video iframe

YouTube Iframe

Vimeo Iframe


    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/v64KOxKVLVg" allowfullscreen></iframe>
    </div>

    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/137857207" allowfullscreen></iframe>
    </div>
                    



Full page video carousel

Click the button below to see a live preview.

Full Video Carousel

Video background MDB Pro component

Click the image below to see a live preview.


<!--Main Navigation-->
<header class="intro-header">

    <!--Navbar-->
    <mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
        <mdb-navbar-brand>
            <a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>MDB</strong></a>
        </mdb-navbar-brand>
        <links>
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active waves-light" mdbWavesEffect>
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item waves-light" mdbWavesEffect>
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item waves-light" mdbWavesEffect>
                    <a class="nav-link" href="#">Profile</a>
                </li>
            </ul>
            <form class="form-inline waves-light" mdbWavesEffect>
                <div class="md-form mt-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                </div>
            </form>
        </links>
    </mdb-navbar>

    <!--Intro Section-->
    <section class="view intro-video">
       <video class="h-100" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsinline autoplay muted loop>
            <source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">
        </video>
        <div class="mask rgba-gradient">
            <div class="full-bg-img">
                <div class="container flex-center">
                    <div class="row pt-5 mt-3">
                        <div class="col-lg-6 wow fadeIn mb-5 text-center text-lg-left">
                            <div class="white-text">
                                <h2 class="h1 h1-responsive font-bold wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet</h2>
                                <hr class="hr-light wow fadeInLeft" data-wow-delay="0.3s">
                                <p class="wow fadeInLeft" data-wow-delay="0.3s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.</p>
                                <br>
                                <a mdbBtn color="white" outline="true" class="wow fadeInLeft waves-light" data-wow-delay="0.3s" mdbWavesEffect>Just do it!</a>
                            </div>
                        </div>

                        <div class="col-lg-6 wow fadeIn">
                            <div class="embed-responsive embed-responsive-16by9 wow fadeInRight">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/IQyauRAxvjI" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</header>
<!--Main Navigation-->
                    

.intro-header {
    height: unset !important;
}
.top-nav-collapse {
    background-color: #7d8488 !important;
}
.view {
    height: 100vh !important;
}
.navbar:not(.top-nav-collapse) {
    background: transparent !important;
}
@media (max-width: 768px) {
    .navbar:not(.top-nav-collapse) {
        background: #7d8488 !important;
    }
}
.rgba-gradient .full-bg-img {
    background: linear-gradient(45deg, rgba(242, 34, 50, 0.5), rgba(255, 187, 54, 0.6) 100%);
}
@media (max-width: 740px) {
    .full-height,
    .full-height body,
    .full-height header,
    .full-height header .view {
        height: 700px;
    }
}
                    

Video with autoplay option

You can use webm ogv mp4 video formats within your HTML file.


<video class="video-fluid z-depth-1" autoplay loop controls muted>
    <source src="https://mdbootstrap.com/img/video/Sail-Away.mp4" type="video/mp4" />
</video>
                    

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

Angular Video - API

In this section you will find informations about required modules for video component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// MDB Angular Pro
    import { WavesModule, ModalModule, CarouselModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
    import { WavesModule, ModalModule, CarouselModule } from 'angular-bootstrap-md'