DEV Community

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

Tailwind CSS - Fluid Width Video

Sung M. Kim
Exploring the world of TypeScript, React & Node
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 (2)

Collapse
jpmti2016 profile image
Yampier Medina

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

Collapse
crishrpz profile image
crishrpz

Very nice!!! thanks a lot...

Forem Open with the Forem app