DEV Community

loading...
Cover image for Tailwind CSS - Fluid Width Video

Tailwind CSS - Fluid Width Video

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

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

  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">
  <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>
Enter fullscreen mode Exit fullscreen mode

Image by Rudy and Peter Skitterians from Pixabay

Discussion (1)

pic
Editor guide
Collapse
jpmti2016 profile image
Yampier Medina

Nice, there is a tailwindcss plugin now that do the job. Godspeed coding!! github.com/tailwindlabs/tailwindcs...