Easily embed Responsive YouTube Videos with Tailwind CSS

Embedding YouTube videos into your responsive website can be a hassle. YouTube uses iFrames for their embeds and these iFrames need a fixed width and height specified. This is far from ideal for responsive websites.

And Yes, even in 2021 YouTube doesn’t offer a way to automatically resize and scale their embeds, why don’t we take a look how we can fix this with Tailwind.

The Aspect Ratio Plugin

Maybe you didn’t know, but you can extend Tailwinds basic functionality with plugins. Just install the desired plugin with npm and include it in your tailwind.config.js file. For our YouTube embeds we using the official @tailwindcss/aspect-ratio plugin.

npm install @tailwindcss/aspect-ratio@latest --save-dev

And then include it in our tailwind.config.js file.

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    // ...
  ],
}

This gives us a whole set of aspect ratio width and height classes to work with. By default, there are 16 generated for us. When those 16 utility classes are not enough for you, you can always extend them.

Default aspect-ratio classes

Common use cases and aspect ratios

Now that we installed the plugin, let’s see what we actually can do with it. The most common use case is making YouTube embed videos behave normal. You can use the aspect-ratio plugin for many more things, like forcing a specific aspect ratio on images. In this article we mainly focus on embedding YouTube videos, feel free to explore other use cases on your own.

YouTube Embed with 16:9 ratio

This is probably the reason why you are reading this article in the first place ;-), responsive YouTube video embeds. I use the following code for the video above:

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

Resize your browser window and see how the video magically adjust it’s width and height. Let’s do a couple more common use cases.

Vimeo Embed with 16:9 ratio

The same trick also works for Vimeo Embeds.

<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://player.vimeo.com/video/146022717?color=0c88dd&title=0&byline=0&portrait=0&badge=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>

YouTube Embed with 9:16 ratio (vertical video)

Another popular format introduced by TikTok is 9:16 aspect ratio. It is most commonly used for vertical videos on mobile.

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

YouTube Embed with 1:1 ratio (square video)

Maybe not as commonly used then the other examples, but you can totally use the Aspect Ratio Plugin to display square YouTube videos.

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

Conclusion

Embedding YouTube videos is still a mess in 2021. But luckily we have Tailwind CSS Aspect Ratio Plugin to help us out. In this article we covered the basics and showed you the most common YouTube Embed use cases. Go, install the plugin and fix your YouTube video embeds now :-)

If you enjoyed this article, please consider subscribing to our Tailwind CSS Newsletter. I will send you a emailwith our best articles. Tips, news, updates, snippets and all the best freebies, all yours, every month!