Introduction
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._
Fluid Width iFrame Video
-
Add a wrapper element with following classes
- relative
- A Tailwind CSS
padding
extension
module.exports = { purge: [...], theme: { extend: { padding: { "fluid-video": "56.25%" } }, }, variants: {}, plugins: [], }
- Remove the wrapper height with h-0.
Position
iframe
with an absolute positioning on top left (top-0
,left-0
), with 100% width and height (w-full
,h-full
).
<div id="responsiveVideoWrapper" className="relative h-0 pb-fluid-video">
<iframe
className="absolute top-0 left-0 w-full h-full"
src="https://www.youtube.com/embed/zihoyz0u_cs"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
Image by Rudy and Peter Skitterians from Pixabay
Top comments (2)
Nice, there is a tailwindcss plugin now that do the job. Godspeed coding!! github.com/tailwindlabs/tailwindcs...
Very nice!!! thanks a lot...