DEV Community

Cover image for Tailwind CSS - Fluid Width Video
Sung M. Kim
Sung M. Kim

Posted on • Originally published at sung.codes on

11 2

Tailwind CSS - Fluid Width Video

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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (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...

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay