Embed
Determine embedded media dimensions based on the width of their containing block by creating an intrinsic ratio that will scale on any device.
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.
Video Element
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:
It is possible to alter the available aspect ratios. These are the default aspect ratio setting and Sass map in _settings.scss
:
Additional aspect ratio classes can also be disabled in your custom settings using:
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 |
|
Additional embed aspect ratios. |
Mixins
No mixins available.