Embed

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

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.0/video/niagara_falls.jpg" controls>
<source src="/assets/4.0/video/niagara_falls.mp4">
<track src="/assets/4.0/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.