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)
Top comments (2)
We dont need plugin for this. Use
aspect-videooraspect-[16/9].Well, try using it with a YouTube video and you'll see that it doesn't work.