Embed Utilities

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

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

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>