2020-10-10
Tailwind CSS - Fluid Width Video
tailwind, tailwindcss, css, youtube, cheatsheet
tailwind, tailwindcss, css, youtube, cheatsheet
Image by Rudy and Peter Skitterians from Pixabay
Learned how to make YouTube videos from this CSS Tricks article, Fluid Width Video.
The following code snippet is a Tailwind CSS version of <iframe> Video (YouTube, Vimeo, etc.) section._
Add a wrapper element with following classes
Position iframe with an absolute positioning on top left (top-0, left-0), with 100% width and height (w-full, h-full).
1<div id="responsiveVideoWrapper" className="relative h-0 pb-fluid-video">2 <iframe3 className="absolute top-0 left-0 w-full h-full"4 src="https://www.youtube.com/embed/zihoyz0u_cs"5 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"6 allowFullScreen7 ></iframe>8</div>
Image by Rudy and Peter Skitterians from Pixabay