Embed

The role of the embed component is solely to make third-party embeds, like YouTube videos, responsive. This minimal scope allows embeds to be used in many different contexts. However, because they are typically self-contained units of content, the best way to lay out embeds on a page is with the figure component. This page demonstrates this common use case.

With figures comes the ability to add captions. While providing a caption is definitely recommended, note that it is better not to have one than for it to simply duplicate the title of the embedded content (i.e. the title of the HTML page loaded within the iframe).

Video embeds

The figure component comes with a variant class specifically for embeds: figure--embed.

YouTube embed with caption and default 16:9 ratio

21:9 ratio with class embed--21_9

Vimeo embed

If the use of a figure element doesn't convey the right semantics, and assuming a caption is not required, you may use a simple div as demonstrated below:

figure--embed is actually just an alias for the following three classes combined: figure--max figure--spaced figure--wide. When it comes to video embeds, only figure--max is required, so if you don't want the embed to be wider than the text, for instance, use figure--max figure--spaced:

This embed is as wide as the text.

Video embeds can be used inside inset figures and half layouts. (This latter configuration doesn't support captions, but a simple alternative is to describe the video in the text opposite.)

Inset YouTube video with caption

Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper consequat sed non leo. Nam massa est, egestas ac felis id, blandit luctus metus. Mauris eu aliquet nisi. Donec nunc ipsum, fermentum quis enim posuere, dapibus fermentum libero. Aliquam erat volutpat. Nulla tempor tellus lorem, dapibus euismod mi mattis sit amet. Sed ac orci consequat, aliquet ligula vitae, facilisis elit. Sed et lobortis est, eu facilisis massa.

With figure--confined to remove offset

Cibo democritum

Ius sonet equidem no, aperiri interpretaris pri ne, eu eirmod graecis his. Sed ne dicunt efficiendi, ad laudem soluta omittam per. Est velit scaevola forensibus ne, diam scripta in est. Cibo democritum quaerendum et duo, nostrum dignissim qui te. Impetus rationibus quaerendum

<p>The figure component comes with a variant class specifically for embeds: <code>figure--embed</code>.
</p>
<figure class="figure figure--embed">
  <div class="embed figure__content">
    <iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/nlF7qp5GNPI" width="560"></iframe>
  </div>
  <figcaption class="figure__caption">YouTube embed with caption and default 16:9 ratio</figcaption>
</figure>
<figure class="figure figure--embed">
  <div class="embed embed--21_9 figure__content">
    <iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/0XuNcBK6aDs" width="560"></iframe>
  </div>
  <figcaption class="figure__caption">21:9 ratio with class <code>embed--21_9</code></figcaption>
</figure>
<figure class="figure figure--embed">
  <div class="embed figure__content">
    <iframe allowfullscreen="" frameborder="0" height="360" src="https://player.vimeo.com/video/21149746" width="640"></iframe>
  </div>
  <figcaption class="figure__caption">Vimeo embed</figcaption>
</figure>
<p>If the use of a <code>figure</code> element doesn't convey the right semantics, and assuming a caption is not required, you may use a simple <code>div</code> as demonstrated below:
</p>
<div class="figure figure--embed">
  <div class="embed figure__content">
    <iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/nlF7qp5GNPI" width="560"></iframe>
  </div>
</div>
<p><code>figure--embed</code> is actually just an alias for the following three classes combined: <code>figure--max figure--spaced figure--wide</code>. When it comes to video embeds, only <code>figure--max</code> is required, so if you don't want the embed to be wider than the text, for instance, use <code>figure--max figure--spaced</code>:
</p>
<figure class="figure figure--max figure--spaced">
  <div class="embed figure__content">
    <iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/nlF7qp5GNPI" width="560"></iframe>
  </div>
  <figcaption class="figure__caption">This embed is as wide as the text.</figcaption>
</figure>
<p>Video embeds can be used inside inset figures and <code>half</code> layouts. (This latter configuration doesn't support captions, but a simple alternative is to describe the video in the text opposite.)
</p>
<div class="with-figure clearfix">
  <figure class="figure figure--left figure--max">
    <div class="embed figure__content">
      <iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/nlF7qp5GNPI" width="560"></iframe>
    </div>
    <figcaption class="figure__caption">Inset YouTube video with caption</figcaption>
  </figure>
  <p>
    Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper consequat sed non leo. Nam massa est, egestas ac felis id, blandit luctus metus. Mauris eu aliquet nisi. Donec nunc ipsum, fermentum quis enim posuere, dapibus fermentum libero. Aliquam erat volutpat. Nulla tempor tellus lorem, dapibus euismod mi mattis sit amet. Sed ac orci consequat, aliquet ligula vitae, facilisis elit. Sed et lobortis est, eu facilisis massa.
  </p>
  <figure class="figure figure--right figure--max figure--confined">
    <div class="embed figure__content">
      <iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/nlF7qp5GNPI" width="560"></iframe>
    </div>
    <figcaption class="figure__caption">With <code>figure--confined</code> to remove offset</figcaption>
  </figure>
  <p>
    Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper consequat sed non leo. Nam massa est, egestas ac felis id, blandit luctus metus. Mauris eu aliquet nisi. Donec nunc ipsum, fermentum quis enim posuere, dapibus fermentum libero. Aliquam erat volutpat. Nulla tempor tellus lorem, dapibus euismod mi mattis sit amet. Sed ac orci consequat, aliquet ligula vitae, facilisis elit. Sed et lobortis est, eu facilisis massa.
  </p>
</div>
<div class="half">
  <section>
    <figure class="figure figure--max">
      <div class="embed figure__content">
        <iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/nlF7qp5GNPI" width="560"></iframe>
      </div>
    </figure>
  </section>
  <section>
    <h1>
      Cibo democritum
    </h1>
    <p>
      Ius sonet equidem no, aperiri interpretaris pri ne, eu eirmod graecis his. Sed ne dicunt efficiendi, ad laudem soluta omittam per. Est velit scaevola forensibus ne, diam scripta in est. <em>Cibo democritum quaerendum et duo</em>, nostrum dignissim qui te. Impetus rationibus quaerendum
    </p>
  </section>
</div>

Soundcloud embeds

SoundCloud provides two embed options, classic and visual, which are shown below. Note that class figure--embed is not used for visual embeds.

SoundCloud "classic" embed

Inset SoundCloud "visual" embed with long caption

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis.

<p>SoundCloud provides two embed options, <em>classic</em> and <em>visual</em>, which are shown below. Note that class <code>figure--embed</code> is not used for <em>visual</em> embeds.
</p>
<figure class="figure figure--embed">
  <div class="embed embed--soundcloud-classic figure__content">
    <iframe frameborder="no" height="266" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/290011378&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false" width="100%"></iframe>
  </div>
  <figcaption class="figure__caption">SoundCloud "classic" embed</figcaption>
</figure>
<div class="with-figure clearfix">
  <figure class="figure figure--right figure--min">
    <div class="embed embed--soundcloud-visual figure__content">
      <iframe frameborder="no" height="450" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/290011401&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true" width="450"></iframe>
    </div>
    <figcaption class="figure__caption">Inset SoundCloud "visual" embed with long caption</figcaption>
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis.
  </p>
</div>