Tailwind CSS - Fluid Width Video

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

Fluid Width iFrame Video

  1. Add a wrapper element with following classes

    1. relative
    2. A Tailwind CSS padding extension
      1module.exports = {2  purge: [...],3  theme: {4    extend: { padding: { "fluid-video": "56.25%" } },5  },6  variants: {},7  plugins: [],8}
    3. Remove the wrapper height with h-0.
  2. 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