Responsive video 21:9
Creating responsive video embeds based on the width of the parent element allows the video to scale up on any device. You can easily modify aspect ratios by customizing them with classes.
Use the .embed-responsive-21by9
class to get the following 21:9 aspect ratio
<div
class="embed-responsive embed-responsive-21by9 relative w-full overflow-hidden"
style="padding-top: 42.857143%"
>
<iframe
class="embed-responsive-item absolute top-0 right-0 bottom-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/vlDzYIIOYmM?enablejsapi=1&origin=https%3A%2F%2Fmdbootstrap.com"
allowfullscreen=""
data-gtm-yt-inspected-2340190_699="true"
id="240632615"
></iframe>
</div>
Responsive video 16:9
Use the .embed-responsive-16by9
class to get the following 16:9 aspect ratio
<div
class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%"
>
<iframe
class="embed-responsive-item absolute top-0 right-0 bottom-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/vlDzYIIOYmM?enablejsapi=1&origin=https%3A%2F%2Fmdbootstrap.com"
allowfullscreen=""
data-gtm-yt-inspected-2340190_699="true"
id="240632615"
></iframe>
</div>
Responsive video 4:3
Use the .embed-responsive-4by3
class to get the following 4:3 aspect ratio
<div
class="embed-responsive embed-responsive-4by3 relative w-full overflow-hidden"
style="padding-top: 75%"
>
<iframe
class="embed-responsive-item absolute top-0 right-0 bottom-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/vlDzYIIOYmM?enablejsapi=1&origin=https%3A%2F%2Fmdbootstrap.com"
allowfullscreen=""
data-gtm-yt-inspected-2340190_699="true"
id="240632615"
></iframe>
</div>
Responsive video 1:1
Use the .embed-responsive-1by1
class to get the following 1:1 aspect ratio
<div
class="embed-responsive embed-responsive-1by1 relative w-full overflow-hidden"
style="padding-top: 100%"
>
<iframe
class="embed-responsive-item absolute top-0 right-0 bottom-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/vlDzYIIOYmM?enablejsapi=1&origin=https%3A%2F%2Fmdbootstrap.com"
allowfullscreen=""
data-gtm-yt-inspected-2340190_699="true"
id="240632615"
></iframe>
</div>
Video iframe
Use the tag. With this frame you can embed a video from an external URL, for example YouTube.
<div class="grid md:grid-cols-2 gap-6">
<div
class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%"
>
<iframe
class="embed-responsive-item absolute top-0 right-0 bottom-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/v64KOxKVLVg"
allowfullscreen
></iframe>
</div>
<div
class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%"
>
<iframe
class="embed-responsive-item absolute top-0 right-0 bottom-0 left-0 w-full h-full"
src="https://player.vimeo.com/video/137857207"
allowfullscreen
></iframe>
</div>
</div>
Video carousel
Video carousel is useful when you have several videos to show and you have limited space on the page.
<div
id="carouselExampleCaptions"
class="carousel slide carousel-fade relative"
data-bs-ride="carousel"
>
<div
class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4"
>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner relative w-full overflow-hidden">
<div class="carousel-item active relative float-left w-full">
<video class="w-full" autoplay loop muted>
<source src="https://mdbootstrap.com/img/video/Lines.mp4" type="video/mp4" />
</video>
<div
class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
style="background-color: rgba(50, 123, 233, 0.1)"
>
<div class="carousel-caption hidden md:block absolute text-center">
<h3 class="text-2xl">Light blue mask</h3>
</div>
</div>
</div>
<div class="carousel-item relative float-left w-full">
<video class="w-full" autoplay loop muted>
<source
src="https://mdbootstrap.com/img/video/animation-intro.mp4"
type="video/mp4"
/>
</video>
<div
class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
style="background-color: rgba(135, 50, 233, 0.1)"
>
<div class="carousel-caption hidden md:block absolute text-center">
<h3 class="text-2xl">Light purple mask</h3>
</div>
</div>
</div>
<div class="carousel-item relative float-left w-full">
<video class="w-full" autoplay loop muted>
<source src="https://mdbcdn.b-cdn.net/img/video/Nature-Sunset.mp4" type="video/mp4" />
</video>
<div
class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed"
style="background-color: rgba(50, 233, 90, 0.1)"
>
<div class="carousel-caption hidden md:block absolute text-center">
<h3 class="text-2xl">Light green mask</h3>
</div>
</div>
</div>
</div>
<button
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"
>
<span
class="carousel-control-prev-icon inline-block bg-no-repeat"
aria-hidden="true"
></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"
>
<span
class="carousel-control-next-icon inline-block bg-no-repeat"
aria-hidden="true"
></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Full page video carousel
Use videos full-page sliders that relate directly to the content to help create a positive first impression, and add CTA elements to navigate the user.
Click the button below to see a live preview.
Full page video carousel
<div id="carouselExampleCaptionsFull" class="carousel slide carousel-fade relative h-screen" data-bs-ride="carousel">
<div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
<button
type="button"
data-bs-target="#carouselExampleCaptionsFull"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptionsFull"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptionsFull"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner relative w-full overflow-hidden h-screen">
<div class="carousel-item active relative float-left w-full h-screen bg-no-repeat bg-cover bg-center">
<video class="min-w-full min-h-full max-w-fit xl:min-w-0 xl:min-h-0" playsinline autoplay muted loop>
<source class="" src="https://mdbootstrap.com/img/video/Lines.mp4" type="video/mp4" />
</video>
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background-color: rgba(0, 0, 0, 0.6);">
<div class="flex justify-center items-center h-full">
<div class="text-white text-center px-14 px-md-0">
<h2 class="text-3xl font-semibold mb-4">Learn Tailwind Elements</h2>
<h5 class="text-lg font-semibold mb-6">Best & free guide of responsive web design</h5>
<div class="md:space-x-2">
<a type="button" class="inline-block px-6 py-2 mb-2 md:mb-0 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" href="#!" role="button" data-mdb-ripple="true" data-mdb-ripple-color="light">Start tutorial</a>
<a type="button" class="inline-block px-6 py-2 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" href="#!" role="button" data-mdb-ripple="true" data-mdb-ripple-color="light">Read more</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item relative float-left w-full h-screen bg-no-repeat bg-cover bg-center">
<video class="min-w-full min-h-full max-w-fit xl:min-w-0 xl:min-h-0" playsinline autoplay muted loop>
<source class="" src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4" />
</video>
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background-color: rgba(0, 0, 0, 0.3)">
<div class="flex justify-center items-center h-full">
<div class="text-white text-center px-14 px-md-0">
<h2 class="text-3xl font-semibold mb-4">You can place here any content</h2>
</div>
</div>
</div>
</div>
<div class="carousel-item relative float-left w-full h-screen bg-no-repeat bg-cover bg-center">
<video class="min-w-full min-h-full max-w-fit xl:min-w-0 xl:min-h-0" playsinline autoplay muted loop>
<source class="" src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" />
</video>
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed" style="background: linear-gradient(45deg, rgba(29, 236, 197, 0.7), rgba(91, 14, 214, 0.7) 100%);">
<div class="flex justify-center items-center h-full">
<div class="text-white text-center px-14 px-md-0">
<h2 class="text-3xl font-semibold mb-4">And cover it with any mask</h2>
<a type="button" class="inline-block px-6 py-2 border-2 border-white text-white font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" href="#!" role="button" data-mdb-ripple="true" data-mdb-ripple-color="light">Learn more</a>
</div>
</div>
</div>
</div>
</div>
<button
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
type="button"
data-bs-target="#carouselExampleCaptionsFull"
data-bs-slide="prev"
>
<span
class="carousel-control-prev-icon inline-block bg-no-repeat"
aria-hidden="true"
></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
type="button"
data-bs-target="#carouselExampleCaptionsFull"
data-bs-slide="next"
>
<span
class="carousel-control-next-icon inline-block bg-no-repeat"
aria-hidden="true"
></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Video with autoplay option
Use the autoplay attribute to allow the video to start playing immediately after the page loads.
<video class="w-full shadow-lg" autoplay loop controls muted>
<source src="https://mdbootstrap.com/img/video/Sail-Away.mp4" type="video/mp4" />
</video>
Video hover to play
Use custom javascript code to automatically start video playing when the user hover the mouse cursor over it. This reduces the number of clicks on your website and provides a great user experience.
<video
src="https://mdbcdn.b-cdn.net/img/video/forest.mp4"
type="video/mp4"
loop
class="clip w-full"
></video>
const clip = document.querySelectorAll('.clip');
for (let i = 0; i < clip.length; i++) {
clip[i].addEventListener('mouseenter', function (e) {
clip[i].play();
});
clip[i].addEventListener('mouseout', function (e) {
clip[i].pause();
});
}