Embedded media
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).
Default embed
The default ratio for embeds is 16:9.
You can also embed videos hosted on Vimeo.
Aspect ratios
We provide two other aspect ratios for embeds which are shown below.
Ultrawide
To set a ratio of 21:9 use the class embed--widescreen
Square
To set a ratio of 1:1 use the class embed--square
Wide embed
The figure component comes with a class specifically for embeds. figure--embed expands the container wider than the text.
SoundCloud embed
We provide to embed options for SoundCloud which are shown below.
Classic SoundCloud
Visual SoundCloud
Inset embed
For inset embeds to be layed out properly, they must be used inside <div class="with-figure">...</div>.
Youtube inset
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. 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.
SoundCloud inset
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. 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.
Div 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: