Embed Utility

Our embed utility is constructed as follows:

.embed {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}

.embed:before {
content: '';
display: block;
padding-top: calc(var(--embed-ratio, (9 / 16)) * 100%);
}

.embed iframe,
.embed video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Purpose

The embed utility is a small helper to create responsive embeds (from sites like YouTube and Vimeo) that scale responsively in terms of aspect ratio.

Example

<div class="[ youtube-embed ] [ embed ]"><iframe></iframe></div>
.youtube-embed {
--embed-ratio: (1920 / 1080);
}