Adding Responsive Design to embedded YouTube videos with TailwindCSS

YouTube does not offer a way to automatically resize and scale. Here is a list of steps to achieve this with Tailwind:

1- Install the plugin @tailwindcss/aspect-ratio

npm i @tailwindcss/aspect-ratio

2- Add the installed plugin to the Tailwind settings

// tailwind.config.js 

plugins: [require("@tailwindcss/aspect-ratio")],

3- Add Responsive Design to your videos:

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

References

• Sizing Images and Videos with Aspect Ratios with Tailwind CSS (Link to YouTube)
• @tailwindcss/aspect-ratio (Link to npm)

Comments

[kouveo]

We dont need plugin for this. Use aspect-video or aspect-[16/9].

[Manuel Alférez Ruiz]

Well, try using it with a YouTube video and you'll see that it doesn't work.