Embed Utilities

Create responsive video embeds by keeping the aspect ratio based on the parent element width.

Example

Embed styles are directly applied to <iframe>, <embed>, <video>, and <object> elements.

Embed Utility Example

Aspect Ratios

Aspect ratios can be customized with embed helper classes. The following aspect ratio classes are available:

<!-- 21:9 aspect ratio -->
<div class="_embed _embed-21by9">
    <iframe src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="_embed _embed-16by9">
    <iframe src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="_embed _embed-4by3">
    <iframe src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="_embed _embed-1by1">
    <iframe src="..."></iframe>
</div>