Tailwind CSS - Fluid Width Video

#tailwindcss #css #youtube #cheatsheet

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

Add a wrapper element with following classes

relative
A Tailwind CSS padding extension

  module.exports = {
    purge: [...],
    theme: {
      extend: { padding: { "fluid-video": "56.25%" } },
    },
    variants: {},
    plugins: [],
  }

Remove the wrapper height with h-0.

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>

Image by Rudy and Peter Skitterians from Pixabay

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 →