[Feature Proposal] Responsive Sizing for Embedded Objects (iframes, object, embed & video)

[davidpiesse]

Short version: Add an additional generator that creates responsive styling for embedded objects such as iFrames. Bootstrap have this and would be a great helper in Tailwind!

Longer Version: I was building a web based SpaceX CapCom :rocket: for my 3yo so he could launch Falcon Heavy (as you do) and I am using vue-youtube to embed a YT video in the site and play / pause / skip it to the relevant scene.

I'm using Tailwind and I cannot get the iframe to be responsive as it requires defined pixel widths - bleh.

Ol' Bootstrap :expressionless: uses the idea of responsive embeds that resize a parent container

<div class="responsive-embed">
    <video src="some-cool-rocket-launch.mp4">
</div>

The also provide size ratios such as

.embed-responsive-21by9 {
  &::before {
    padding-top: percentage(9 / 21);
  }
}

In Tailwind we could have :grin:

<div class="embed-21/9">
    <video src="some-cool-rocket-launch.mp4">
</div>

What are your thoughts on this as an additional generator and a small list of ratios (21-9 / 16-9 / 4-3 and 1-1) in the config file? Adds a max default of 5 classes and around 60 lines of CSS.

Happy to code this up and PR if it's worthwhile :smile:

Thanks, David

[davidpiesse]

Here is the BS4 link to their code equivilant (original idea here)

[hacknug]

Naming should probably refer to aspect-ratio or similar since that's what you're trying to accomplish.

I usually don't need more than one given aspect ratio in most websites so I just change the percentage value. When I've needed multiple aspect ratios I've just named my classes like .aspect-ratio-16/9 and made them share everything but the percentage value.

Not sure this is something we need in core since sometimes you're going to need this only to set a min-height using pseudo-elements and not the whole element's size/proportions.

Leaving my utility just for future reference/discussion.

.aspect-ratio {
  position: relative;
  height: 0;
  padding-bottom: 75%;
}

.aspect-ratio > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

[LasseRafn]

Similar: #389

[timkelty]

SUITCSS equivalent: https://github.com/suitcss/components-flex-embed

[JonasDoebertin]

This is available as a plugin now: https://github.com/webdna/tailwindcss-aspect-ratio

[davidpiesse]

Gosh darn those plugins! 😆 Thanks

[Willardgmoore]

Why do we have to resort to a plugin? I'm just starting out with tailwindcss and requiring a plug in for something like this just doesn't feel right. Is this on a roadmap, or is this an expected pattern I should follow? Are there other tailwindcss plugins I should know about?

[hacknug]

Why do we have to resort to a plugin? I'm just starting out with tailwindcss and requiring a plug in for something like this just doesn't feel right. Is this on a roadmap, or is this an expected pattern I should follow? Are there other tailwindcss plugins I should know about?

Because that's what plugins are for. This is the expected pattern to follow although there's no need for you to use a plugin for this use-case. You could use core's padding plugin to create equivalent utilities and only use the padding-top or padding-bottom utilities to accomplish this.

You can find more plugins in the awesome-tailwindcss repo and npm.