How to Create Responsive Videos with Tailwind CSS

Now that Tailwind CSS supports aspect ratios, you can create responsive videos with Tailwind CSS. It’s a given that you’ll need the latest version of Tailwind CSS running on your project.

HTML

Code

  <div class="aspect-video">
    <iframe
      class="w-full h-full"
      src="https://www.youtube.com/embed/FF3fuYLnApQ"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen>
    </iframe>
  </div>

It’s really that easy! You only need a few utility classes from Tailwind in order to do this. Let’s break down what is happening.

First, you need a div wrapper to contain the iframe that is the YouTube embed video player. You add aspect-video around the wrapper div, which under the hood is setting the CSS to aspect-ratio: 16 / 9;.

Next, you need to make the iframe’s width and height full the parent container. You can do this by adding w-full h-full to the iframe. Under the hood, this is setting the CSS to width: 100%; height: 100%;.

Do you really need Tailwind for this?

Probably not. But if you are already using Tailwind on your project, this pattern can help you get a head start. If you want to use this outside of Tailwind, here the same example as above, but in regular HTML and CSS only.

<style>
  .video-wrapper {
    aspect-ratio: 16 / 9;
  }

  .video-wrapper iframe {
    width: 100%;
    height: 100%;
  }
</style>

<div class="video-wrapper">
  <iframe
    src="https://www.youtube.com/embed/FF3fuYLnApQ"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>

Do you really need Tailwind for this?

Related posts