DEV Community

Cover image for Tailwind CSS - Fluid Width Video

Tailwind CSS - Fluid Width Video

dance2die profile image Sung M. Kim Originally published at on ・1 min read


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
      module.exports = {
        purge: [...],
        theme: {
          extend: { padding: { "fluid-video": "56.25%" } },
        variants: {},
        plugins: [],
    1. 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).

<div id="responsiveVideoWrapper" className="relative h-0 pb-fluid-video">
    className="absolute top-0 left-0 w-full h-full"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
Enter fullscreen mode Exit fullscreen mode

Image by Rudy and Peter Skitterians from Pixabay

Discussion (1)

Editor guide
jpmti2016 profile image
Yampier Medina

Nice, there is a tailwindcss plugin now that do the job. Godspeed coding!!