Skip to content

Instantly share code, notes, and snippets.

@christophengelmayer

christophengelmayer/tailwind-resonsive-embed.html

Last active September 10, 2024 11:52
Show Gist options
  • Save christophengelmayer/0edd4d9b6fdeb6ff551fb80d957fd35d to your computer and use it in GitHub Desktop.
Save christophengelmayer/0edd4d9b6fdeb6ff551fb80d957fd35d to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind CSS responsive Video embed
Raw
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>
@matthewgroenendijk
Copy link

Thanks! You helped me out :D

@raphaelsaunier
Copy link

raphaelsaunier commented Jan 13, 2021 •
edited
Loading

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! 😛

@christophengelmayer
Copy link
Author

@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.

@gauravmak
Copy link

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

@EltonWhybrow
Copy link

EltonWhybrow commented May 21, 2021 •
edited
Loading

👊🏻 Thanks guys

@daltondiaz
Copy link

Thanks!

@SermadNajar
Copy link

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

@ahockemeyer
Copy link

What about google maps embeds?

@codelikesuraj
Copy link

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

@ronaldaraujo
Copy link

@christophengelmayer success! Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment