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.

The thumbnail, duration, and label values are automatically extracted from YouTube and Vimeo videos.

to set a custom label refer to custom labels
to set a custom thumbnail refer to custom thumbnails

Youtube embed

Vimeo embed

You can also embed videos hosted on Vimeo. However, the thumbnail provided by the Vimeo API might be of low quality or might not exist at all. Therefore, it's advisable to use a custom thumbnail.

Custom labels

Customise your label by using the data-label attribute.

Custom thumbnails

Customise your thumbnail by using the data-thumbnail attribute.

Aspect ratios

The default aspect ratio of 16:9 applies to all video content. For basic iframes that are not within the embed container, this default ratio applies to the following sources:

YouTube
Vimeo
Youku
Google Maps

For other iframe sources, the specified height of the iframe is used.

We provide three other aspect ratios to choose from:

Widescreen
Square
Portrait

Widescreen

Use the class embed--widescreen to adjust the ratio of the embed to 21:9.

Square

Use the class embed--square to adjust the ratio of the embed to 1:1.

Portrait

Use the class embed--portrait to adjust the ratio of the embed to 9:16.

Video embed

If a custom thumbnail or label isn't set, the overlay will not be displayed.

Spotify embed

SoundCloud embed

We provide to embed options for SoundCloud which are shown below.

Classic SoundCloud

Visual SoundCloud

Maps embed

The map embed utilizes the height value specified in the iframe.

Google maps embed

The default aspect ratio is applied to Google Maps.