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="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Enter fullscreen mode Exit fullscreen mode


Top comments (2)

sedangky profile image

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

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.