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 bottom-0 left-0 right-0 top-0 h-full w-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 bottom-0 left-0 right-0 top-0 h-full w-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 bottom-0 left-0 right-0 top-0 h-full w-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 bottom-0 left-0 right-0 top-0 h-full w-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 iframe tag. With this frame you can embed a video from
an external URL, for example YouTube.
<div
class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
style="padding-top: 56.25%">
<iframe
class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-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 bottom-0 left-0 right-0 top-0 h-full w-full"
src="https://player.vimeo.com/video/137857207"
allowfullscreen></iframe>
</div>
Video carousel
Video carousel is useful when you have several videos to show and you have limited space on the page.
Light primary mask
Light purple mask
Light green mask
<div
id="carouselExampleCaptions"
class="relative"
data-twe-carousel-init
data-twe-carousel-slide>
<div
class="absolute inset-x-0 bottom-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
data-twe-carousel-indicators>
<button
type="button"
data-twe-target="#carouselExampleCaptions"
data-twe-slide-to="0"
data-twe-carousel-active
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-current="true"
aria-label="Slide 1"></button>
<button
type="button"
data-twe-target="#carouselExampleCaptions"
data-twe-slide-to="1"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 2"></button>
<button
type="button"
data-twe-target="#carouselExampleCaptions"
data-twe-slide-to="2"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 3"></button>
</div>
<div
class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
<div
class="relative float-left -mr-[100%] hidden w-full !transform-none opacity-0 transition-opacity duration-[600ms] ease-in-out motion-reduce:transition-none"
data-twe-carousel-fade
data-twe-carousel-item
data-twe-carousel-active>
<video class="w-full" autoplay loop muted>
<source
src="https://tecdn.b-cdn.net/img/video/Lines.mp4"
type="video/mp4" />
</video>
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: rgba(50, 123, 233, 0.1)">
<div
class="carousel-caption absolute hidden text-center md:block">
<h3 class="text-2xl">Light primary mask</h3>
</div>
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full !transform-none opacity-0 transition-opacity duration-[600ms] ease-in-out motion-reduce:transition-none"
data-twe-carousel-fade
data-twe-carousel-item>
<video class="w-full" autoplay loop muted>
<source
src="https://tecdn.b-cdn.net/img/video/animation-intro.mp4"
type="video/mp4" />
</video>
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: rgba(135, 50, 233, 0.1)">
<div
class="carousel-caption absolute hidden text-center md:block">
<h3 class="text-2xl">Light purple mask</h3>
</div>
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden w-full !transform-none opacity-0 transition-opacity duration-[600ms] ease-in-out motion-reduce:transition-none"
data-twe-carousel-fade
data-twe-carousel-item>
<video class="w-full" autoplay loop muted>
<source
src="https://tecdn.b-cdn.net/img/video/Nature-Sunset.mp4"
type="video/mp4" />
</video>
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: rgba(50, 233, 90, 0.1)">
<div
class="carousel-caption absolute hidden text-center md:block">
<h3 class="text-2xl">Light green mask</h3>
</div>
</div>
</div>
</div>
<button
class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#carouselExampleCaptions"
data-twe-slide="prev">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Previous</span
>
</button>
<button
class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#carouselExampleCaptions"
data-twe-slide="next">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Next</span
>
</button>
</div>
// Initialization for ES Users
import {
Carousel,
initTWE,
} from "tw-elements";
initTWE({ Carousel });
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="relative h-screen"
data-twe-carousel-init
data-twe-carousel-slide>
<div
class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0">
<button
type="button"
data-twe-target="#carouselExampleCaptionsFull"
data-twe-slide-to="0"
data-twe-carousel-active
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-current="true"
aria-label="Slide 1"></button>
<button
type="button"
data-twe-target="#carouselExampleCaptionsFull"
data-twe-slide-to="1"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 2"></button>
<button
type="button"
data-twe-target="#carouselExampleCaptionsFull"
data-twe-slide-to="2"
class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
aria-label="Slide 3"></button>
</div>
<div
class="relative h-screen w-full overflow-hidden after:clear-both after:block after:content-['']">
<div
class="relative float-left -mr-[100%] hidden h-screen w-full !transform-none bg-cover bg-center bg-no-repeat opacity-0 transition-opacity duration-[600ms] ease-in-out motion-reduce:transition-none"
data-twe-carousel-fade
data-twe-carousel-item
data-twe-carousel-active>
<video
class="min-h-full min-w-full max-w-fit xl:min-h-0 xl:min-w-0"
playsinline
autoplay
muted
loop>
<source
class=""
src="https://tecdn.b-cdn.net/img/video/Lines.mp4"
type="video/mp4" />
</video>
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: rgba(0, 0, 0, 0.6)">
<div class="flex h-full items-center justify-center">
<div class="px-md-0 px-14 text-center text-white">
<h2 class="mb-4 text-3xl font-semibold">Learn TW elements</h2>
<h5 class="mb-6 text-lg font-semibold">
Best & free guide of responsive web design
</h5>
<div class="md:space-x-2">
<a
type="button"
class="mb-2 inline-block rounded border-2 border-white px-6 py-2 text-xs font-medium uppercase leading-tight text-white transition duration-150 ease-in-out hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 md:mb-0"
href="#!"
role="button"
data-twe-ripple-init
data-twe-ripple-color="light"
>Start tutorial</a
>
<a
type="button"
class="inline-block rounded border-2 border-white px-6 py-2 text-xs font-medium uppercase leading-tight text-white transition duration-150 ease-in-out hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0"
href="#!"
role="button"
data-twe-ripple-init
data-twe-ripple-color="light"
>Read more</a
>
</div>
</div>
</div>
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden h-screen w-full !transform-none bg-cover bg-center bg-no-repeat opacity-0 transition-opacity duration-[600ms] ease-in-out motion-reduce:transition-none"
data-twe-carousel-fade
data-twe-carousel-item>
<video
class="min-h-full min-w-full max-w-fit xl:min-h-0 xl:min-w-0"
playsinline
autoplay
muted
loop>
<source
class=""
src="https://tecdn.b-cdn.net/img/video/forest.mp4"
type="video/mp4" />
</video>
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
style="background-color: rgba(0, 0, 0, 0.3)">
<div class="flex h-full items-center justify-center">
<div class="px-md-0 px-14 text-center text-white">
<h2 class="mb-4 text-3xl font-semibold">
You can place here any content
</h2>
</div>
</div>
</div>
</div>
<div
class="relative float-left -mr-[100%] hidden h-screen w-full !transform-none bg-cover bg-center bg-no-repeat opacity-0 transition-opacity duration-[600ms] ease-in-out motion-reduce:transition-none"
data-twe-carousel-fade
data-twe-carousel-item>
<video
class="min-h-full min-w-full max-w-fit xl:min-h-0 xl:min-w-0"
playsinline
autoplay
muted
loop>
<source
class=""
src="https://tecdn.b-cdn.net/img/video/Tropical.mp4"
type="video/mp4" />
</video>
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-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 h-full items-center justify-center">
<div class="px-md-0 px-14 text-center text-white">
<h2 class="mb-4 text-3xl font-semibold">
And cover it with any mask
</h2>
<a
type="button"
class="inline-block rounded border-2 border-white px-6 py-2 text-xs font-medium uppercase leading-tight text-white transition duration-150 ease-in-out hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0"
href="#!"
role="button"
data-twe-ripple-init
data-twe-ripple-color="light"
>Learn more</a
>
</div>
</div>
</div>
</div>
</div>
<button
class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#carouselExampleCaptionsFull"
data-twe-slide="prev">
<span class="inline-block h-8 w-8">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="#fff">
<path
d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Previous</span
>
</button>
<button
class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#carouselExampleCaptionsFull"
data-twe-slide="next">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Next</span
>
</button>
</div>
// Initialization for ES Users
import {
Carousel,
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Carousel, Ripple });
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://tecdn.b-cdn.net/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://tecdn.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();
});
}
Related resources
Tutorials:
containers
fullscreen background image
flexbox
arbitrary values
text
spacing
masks
carousel
rounded corners
sizing
Extended Docs:
animations
figures
headings
images
mask
footer
carousel
gallery
jumbotron
modal
video carousel
background image
background position
box sizing
center grid items
display flex
position
spacing
visibility hidden