A useful pattern for keeping elements sized to a specific aspect ratio even
when their width is flexible, in particular tricky elements like
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> </div>
We customize the base component with a default
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
This should be used sparingly as it isn't very semantic and doesn't support
responsive image techniques like
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> </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.