Getting started

Components

Navigation

Forms

Methods

Design Blocks

Coming Soon

Tailwind Video component

Responsive video built with Tailwind CSS. Video gallery compiles a number of media into interactive collection presented in a basic or a more advanced lightbox.

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&amp;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&amp;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&amp;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&amp;origin=https%3A%2F%2Fmdbootstrap.com"
          allowfullscreen=""
          data-gtm-yt-inspected-2340190_699="true"
          id="240632615"
        ></iframe>
      </div>

Video iframe

Use the 

        
            
      <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();
        });
      }