Video
Angular Bootstrap Video
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.
Video iframe
YouTube Iframe
Vimeo Iframe
Video within modals MDB Pro component
Video carousel
Light mask
First text
Super light mask
Secondary text
Strong mask
Third text
Full page video carousel
Click the button below to see a live preview.
Video background MDB Pro component
Click the image below to see a live preview.
MDB
Lorem ipsum dolor sit amet
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.
Just do it!
.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-fluid {
width: 100%;
height: auto;
}