DEV Community 👩‍💻👨‍💻

Manuel Alférez Ruiz
Manuel Alférez Ruiz

Posted on

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
Enter fullscreen mode Exit fullscreen mode

2- Add the installed plugin to the Tailwind settings

// tailwind.config.js 

plugins: [require("@tailwindcss/aspect-ratio")],
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

References

Top comments (2)

Collapse
sedangky profile image
kouveo

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

Collapse
manuelalferez profile image
Manuel Alférez Ruiz Author

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

🗣 Want to join the conversation?

 
It's easy! Become a DEV member to follow this post, comment, and more.