Embed

Determine embedded media dimensions based on the width of their containing block by creating an intrinsic ratio that will scale on any device.

Page Contents

Overview

Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-fluid-item when you want to match the styling for other attributes.

Examples

Inline Frames

Pro-Tip! You don't need to include frameborder="0" in your <iframe>s as we override that for you in the Reboot styles.

<div class="embed-fluid embed-fluid-16x9">
  <iframe class="embed-fluid-item" src="https://www.youtube.com/embed/MbGkL06EU90?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Video Element

<div class="embed-fluid">
  <video poster="/assets/4.1/video/niagara_falls.jpg" controls>
    <source src="/assets/4.1/video/niagara_falls.mp4">
    <track src="/assets/4.1/video/niagara_falls-en.vtt" label="English" kind="subtitles" srclang="en" default />
  </video>
</div>

Aspect Ratios

By default the aspect ratio is set to 16:9, this can be customized by overriding the $embed-ratio settings variable. Also, the aspect ratios can be customized with the included modifier classes. By default the following aspect ratio classes are provided:

<!-- 21:9 aspect ratio -->
<div class="embed-fluid embed-fluid-21x9">
  <iframe class="embed-fluid-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-fluid embed-fluid-16x9">
  <iframe class="embed-fluid-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-fluid embed-fluid-4x3">
  <iframe class="embed-fluid-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-fluid embed-fluid-1x1">
  <iframe class="embed-fluid-item" src="..."></iframe>
</div>

It is possible to alter the available aspect ratios. These are the default aspect ratio setting and Sass map in _settings.scss:

$embed-fluid-default-ratio: percentage(9 / 16) !default;
$embed-fluid-aspect-ratios: (
  "21x9": (
    x: 21,
    y: 9
  ),
  "16x9": (
    x: 16,
    y: 9
  ),
  "4x3": (
    x: 4,
    y: 3
  ),
  "1x1": (
    x: 1,
    y: 1
  )
);

Additional aspect ratio classes can also be disabled in your custom settings using:

$embed-fluid-aspect-ratios: false;

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name	Type	Default	Description
`$enable-utility-embed`	boolean	`true`	Enable the generation of the embed utility classes. Smaller segements of the embed utilities can be disabled with the following `$enable-*` variables.
`$enable-utility-embed-fluid`	boolean	`true`	Enable the generation of the fluid embed utility classes.
`$enable-utility-embed-fullscreen`	boolean	`true`	Enable the generation of the fullscreen overrides for embed utility classes.
`$embed-fluid-default-ratio`	string	`percentage(9 / 16)`	The default embed aspect ratio.
`$embed-fluid-aspect-ratios`	list	`( (21, 9), (16, 9), (4, 3), (1, 1) )`	Additional embed aspect ratios.

Mixins

No mixins available.