# suitcss-flex-embed

**Repository Path**: mirrors_jaredhanson/suitcss-flex-embed

## Basic Information

- **Project Name**: suitcss-flex-embed
- **Description**: A UI component for intrinsic ratio embeds
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-25
- **Last Updated**: 2026-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SUIT flexible embed

A SUIT component for responsive, intrinsic ratio embeds. Includes modifier
classes for 16:9 and 4:3 aspect ratios.

Read more about [SUIT's design principles](https://github.com/necolas/suit/).

## Installation

* [Bower](http://bower.io/): `bower install --save suit-flex-embed`
* Download: [zip](https://github.com/necolas/suit-flex-embed/zipball/master)
* Git: `git clone https://github.com/necolas/suit-flex-embed.git`

## Available classes

* `FlexEmbed` - The core responsive embed component with no dimensions
* `FlexEmbed--16by9` - The modifier class for 16x9 aspect ratio embed
* `FlexEmbed--4by3` - The modifier class for 4x3 aspect ratio embed
* `FlexEmbed-item` - The descendant class for the media that is being embedded
  (optional for `iframe`, `embed`, and `object` elements)

## Usage

Like many SUIT components, suit-flex-embed relies on a base component class
that is extended by any number of additional modifier classes.

```html
<div class="FlexEmbed FlexEmbed--16by9">
    [iframe|object|embed]
</div>

<div class="FlexEmbed FlexEmbed--4by3">
    <img class="FlexEmbed-item" src="…" alt="">
</div>
```

The suit-flex-embed component can be extended with additional aspect ratios if your
application makes use of multi-media embeds that require them. For example, to
create a 2.35:1 aspect ratio:

```css
/**
 * Modifier: 47:20 aspect ratio
 */

.FlexEmbed--47by20 {
    padding-bottom: 42.55%;
}
```

Alternatively, aspect ratios can be calculated programmatically and the
corresponding `padding-bottom` value applied using an inline style.

## Browser support

* Google Chrome (latest)
* Opera (latest)
* Firefox 4+
* Safari 5+
* Internet Explorer 8+