How to Embed Responsive YouTube Videos With Tailwind CSS

If you're looking for a fast and easy way to embed responsive YouTube Videos on your website, you have come to the right place. We'll walk you through the process step-by-step.

The first step in creating a responsive YouTube video is to add the 'aspect-ratio' CSS property. This utility is designed to remove the wrapper height from the end result.

Install the plugin from npm:

npm install -D @tailwindcss/aspect-ratio

Then add the plugin to your tailwind.config.js file, and disable the aspectRatio core plugin to avoid conflicts with the native aspect-ratio utilities included in Tailwind CSS v3.0:

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

Combine the aspect-w-{n} and aspect-h-{n} classes to specify the aspect ratio for an element: