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
You can also embed videos hosted on Vimeo.
Aspect ratios
The default embed ratio is 16:9.
We provide three other options to choose from:
WidescreenSquarePortrait
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.
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
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.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, minus mollitia. Doloribus fugiat, aut exercitationem inventore nisi consequatur beatae unde delectus obcaecati minus atque aspernatur aperiam suscipit ullam autem maiores. Quisquam, voluptatibus ullam magni consectetur perferendis obcaecati molestiae corporis, a repellendus nobis animi molestias rerum id nisi esse. Inventore dolorem explicabo officiis, iure sit rerum nisi modi veniam perspiciatis! Ipsam! Expedita libero ipsa, quae reprehenderit, hic saepe ratione odit ducimus fugiat odio exercitationem culpa, cumque tempora ipsum ea maiores dicta a in perferendis error cum voluptate dolore. Incidunt, commodi!
SoundCloud inset
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.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, minus mollitia. Doloribus fugiat, aut exercitationem inventore nisi consequatur beatae unde delectus obcaecati minus atque aspernatur aperiam suscipit ullam autem maiores. Quisquam, voluptatibus ullam magni consectetur perferendis obcaecati molestiae corporis, a repellendus nobis animi molestias rerum id nisi esse. Inventore dolorem explicabo officiis, iure sit rerum nisi modi veniam perspiciatis! Ipsam! Expedita libero ipsa, quae reprehenderit, hic saepe ratione odit ducimus fugiat odio exercitationem culpa, cumque tempora ipsum ea maiores dicta a in perferendis error cum voluptate dolore. Incidunt, commodi!
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: