Tailwind CSS Video - Free Examples & Tutorial

Use responsive video component with helper examples for video backgrounds, embeds, responsive videos, aspect ratios & more. Free download, open-source license.

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

HTML

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

Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Responsive video 16:9

Use the .embed-responsive-16by9 class to get the following 16:9 aspect ratio

HTML

        
            
      <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&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

HTML

        
            
      <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&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

HTML

        
            
      <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&amp;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.

HTML

        
            
      <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.

HTML
javascript

        
            
      <div
        id="carouselExampleCaptions"
        class="relative"
        data-te-carousel-init
        data-te-carousel-slide>
        <div
          class="absolute inset-x-0 bottom-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
          data-te-carousel-indicators>
          <button
            type="button"
            data-te-target="#carouselExampleCaptions"
            data-te-slide-to="0"
            data-te-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-te-target="#carouselExampleCaptions"
            data-te-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-te-target="#carouselExampleCaptions"
            data-te-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-te-carousel-fade
            data-te-carousel-item
            data-te-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-te-carousel-fade
            data-te-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-te-carousel-fade
            data-te-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-te-target="#carouselExampleCaptions"
          data-te-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-te-target="#carouselExampleCaptions"
          data-te-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,
        initTE,
      } from "tw-elements";
      
      initTE({ 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

HTML
javascript

        
            
      <div
        id="carouselExampleCaptionsFull"
        class="relative h-screen"
        data-te-carousel-init
        data-te-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-te-target="#carouselExampleCaptionsFull"
            data-te-slide-to="0"
            data-te-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-te-target="#carouselExampleCaptionsFull"
            data-te-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-te-target="#carouselExampleCaptionsFull"
            data-te-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-te-carousel-fade
            data-te-carousel-item
            data-te-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 Tailwind 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-te-ripple-init
                      data-te-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-te-ripple-init
                      data-te-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-te-carousel-fade
            data-te-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-te-carousel-fade
            data-te-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-te-ripple-init
                    data-te-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-te-target="#carouselExampleCaptionsFull"
          data-te-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-te-target="#carouselExampleCaptionsFull"
          data-te-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,
        initTE,
      } from "tw-elements";
      
      initTE({ Carousel, Ripple });

Video with autoplay option

Use the autoplay attribute to allow the video to start playing immediately after the page loads.

HTML

        
            
      <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.

HTML
javascript

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