Embed Utility

Our embed utility is constructed as follows:

.embed {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.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);
}