Adding Responsive Design to embedded YouTube videos with TailwindCSS

Published at

4/2/2022

Categories

2 categories in total

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)

dev-resources.site

Adding Responsive Design to embedded YouTube videos with TailwindCSS