Tailwind CSS responsive Video embed

tailwind-resonsive-embed.html

<div class="relative" style="padding-top: 56.25%">
  <iframe class="absolute inset-0 w-full h-full" src="https://www.youtube-nocookie.com/embed/FMrtSHAAPhM" frameborder="0" …></iframe>
</div>

Thanks! You helped me out :D

That can even be achieved with fewer classes:

<div class="relative" style="padding-top: 56.25%"> <iframe src="https://example.com" class="absolute inset-0 w-full h-full" frameborder="0" …></iframe></div>

Edit: Actually, you might as well use the official @tailwindcss/aspect-ratio plugin! 😛

@rap

👍

That can even be achieved with fewer classes:

<div class="relative" style="padding-top: 56.25%">
  <iframe src="https://example.com" class="absolute inset-0 w-full h-full" frameborder="0" …></iframe>
</div>

Thanks for the hint. I updated the gist.

https://www.themes.dev/blog/easily-embed-responsive-youtube-video-with-tailwind-css/

👊🏻 Thanks guys

Thanks!

how do you embed a local video then? and not a yt video?

What about google maps embeds?

Thanks man. This works for me. I don't even the aspect-ratio plugin for my use case

@christophengelmayer success! Thanks!