Patterns: Embeds

Responsive embeds go inside a <figure class="figure figure--embed"> with an additional element inside indicating the aspect ratio:

<figure class="figure figure--embed">
  <div class="figure--embed__16by9">
    <iframe src="https://www.youtube.com/embed/0bYY8m1Lb2I" allowfullscreen></iframe>
  </div>
</figure>

This works for iframe, embed, object and video elements.

Aspect ratio classes are:

.figure--embed__21by9
.figure--embed__16by9
.figure--embed__4by3
.figure--embed__1by1

Aligned left or right

.figure--left and .figure--right float the embed to one side at wider widths, with text wrapping around.

This figure has the .figure--right class. At narrow widths it will take up the full width of its container, and the image within will be 100% width. At wider widths it will float right, be 50% of the container’s width, and text will wrap around it. This is just some extra text to fill up the space and stop the two images crashing into each other, something you have to be careful of if putting images not very far apart. It can take a lot of text if you want it to fully wrap around the figure like this. It can take a lot of text if you want it to fully wrap around the figure like this.

This figure has the .figure--left class. At narrow widths it will take up the full width of its container, and the embed within will be 100% width. At wider widths it will float right, be 50% of the container’s width, and text will wrap around it. This is just some extra text to fill up the space and stop the two images crashing into each other, something you have to be careful of if putting images not very far apart. It can take a lot of text if you want it to fully wrap around the figure like this. It can take a lot of text if you want it to fully wrap around the figure like this.

<figure class="figure figure--embed figure--right">
  <div class="figure--embed__16by9">
    <iframe src="https://www.youtube.com/embed/0bYY8m1Lb2I" allowfullscreen></iframe>
  </div>
</figure>

<p>This figure has the <code>.figure--right</code> class. At narrow widths it will take up the full width of its container, and the image within will be 100% width. At wider widths it will float right, be 50% of the container’s width, and text will wrap around it. <em>This is just some extra text to fill up the space and stop the two images crashing into each other, something you have to be careful of if putting images not very far apart. It can take a lot of text if you want it to fully wrap around the figure like this. It can take a lot of text if you want it to fully wrap around the figure like this.</em></p>

<figure class="figure figure--embed figure--left">
  <div class="figure--embed__16by9">
    <iframe src="https://www.youtube.com/embed/0bYY8m1Lb2I" allowfullscreen></iframe>
  </div>
</figure>

<p>This figure has the <code>.figure--left</code> class. At narrow widths it will take up the full width of its container, and the embed within will be 100% width. At wider widths it will float right, be 50% of the container’s width, and text will wrap around it. <em>This is just some extra text to fill up the space and stop the two images crashing into each other, something you have to be careful of if putting images not very far apart. It can take a lot of text if you want it to fully wrap around the figure like this. It can take a lot of text if you want it to fully wrap around the figure like this.</em></p>

Captions

They can include a <figcaption> element:

Toast of London – “Yes”.

<figure class="figure figure--embed">
  <div class="figure--embed__16by9">
    <iframe src="https://www.youtube.com/embed/0bYY8m1Lb2I" allowfullscreen></iframe>
  </div>

  <figcaption>
    <cite>Toast of London</cite> – “Yes”.
  </figcaption>
</figure>