Flex Embed

A useful pattern for keeping elements sized to a specific aspect ratio even when their width is flexible, in particular tricky elements like <iframe>.

  • FlexEmbed - The root node.
  • FlexEmbed-ratio - The element that provides the aspect ratio (1:1 by default).
  • FlexEmbed-ratio--3by1 - The modifier class for 3:1 aspect ratio embed.
  • FlexEmbed-ratio--2by1 - The modifier class for 2:1 aspect ratio embed,
  • FlexEmbed-ratio--16by9 - The modifier class for 16:9 aspect ratio embed.
  • FlexEmbed-ratio--4by3 - The modifier class for 4:3 aspect ratio embed.
  • FlexEmbed-content - The descendent class for the content that is being displayed.
<div class="FlexEmbed">
  <div class="FlexEmbed-ratio FlexEmbed-ratio--16by9"></div>
  <iframe class="FlexEmbed-content" width="560" height="315" src="https://www.youtube.com/embed/JBgfw-B2rRs" allowfullscreen></iframe>

We customize the base component with a default background-size of cover. This allows us to use FlexEmbed as a very simple "lazy-load" image strategy, for example in the navigation if we want images to not load until they're visible.

This should be used sparingly as it isn't very semantic and doesn't support responsive image techniques like srcset or sizes, but for presentation imagery it's preferable to loading way more images than we need!

<div class="FlexEmbed">
  <div class="FlexEmbed-ratio FlexEmbed-ratio--2by1"></div>
  <div class="FlexEmbed-content" style="background-image: url(/images/prototypes/tcs/generator-lifestyle.jpg);"></div>

We also support <iframe> elements as immediate children of FlexEmbed-content. This violates our CSS specificity guidelines but makes wrapping embeds in CMS content much, much easier.