Adding Responsive Design to embedded YouTube videos with TailwindCSS
#tailwindcss#nextjs
Manuel Alférez Ruiz

Manuel Alférez Ruiz @manuelalferez

About: Sharing

Location:
España
Joined:
Sep 27, 2020

Adding Responsive Design to embedded YouTube videos with TailwindCSS

Publish Date: Apr 2 '22
16 2

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

Comments 2 total

  • kouveo
    kouveoApr 2, 2022

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

    • Manuel Alférez Ruiz
      Manuel Alférez RuizApr 4, 2022

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

Add comment