2020-10-10

Tailwind CSS - Fluid Width Video

tailwind, tailwindcss, css, youtube, cheatsheet

banner

Image by Rudy and Peter Skitterians from Pixabay


title: Tailwind CSS - Fluid Width Video date: "2020-10-10" published: true tags: "tailwind, tailwindcss, css, youtube, cheatsheet" author: Sung M. Kim banner: ./images/featured-image.jpg bannerCredit: "Image by Rudy and Peter Skitterians from Pixabay"

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

1<div id="responsiveVideoWrapper" className="relative h-0 pb-fluid-video">2  <iframe3    className="absolute top-0 left-0 w-full h-full"4    src="https://www.youtube.com/embed/zihoyz0u_cs"5    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"6    allowFullScreen7  ></iframe>8</div>

Image by Rudy and Peter Skitterians from Pixabay