Media
Embedded media like images, audio, video, and iframes are designed to look good out-of-the-box.
Images
Images never exceed the width of their parent container, and automatically scale to fit their parent.
<img
height="960"
width="1440"
alt="A gorgeous jellyfish drifting in the ocean"
src="/img/docs/jellyfish.jpg"
>Captions
Add a caption to an image by wrapping the image in a <figure> element, and including a <figcaption> element with the caption text.
Note: a caption isn't the same thing as
alt text. You should always include alt text, even if you have a caption, and the content of each should be different.
<figure>
<img
height="960"
width="1440"
alt="A gorgeous jellyfish drifting in the ocean"
src="/img/docs/jellyfish.jpg"
>
<figcaption>Ran into this big fella on my last snorkeling trip (not really!)</figcaption>
</figure>Video
The <video> element always fills the width of its parent container, and scales proportionally.
<video controls src="../flower.mp4"></video>Audio
The <audio> element always fills the width of its parent container.
<audio controls="controls" src="../podcast-episode.mp3"></audio>iFrames
The <iframe> element always fills the width of its parent container.
By default, iFrames don’t scale and resize proportionally. You can fix this by applying a relevant .aspect-ratio-* class.
<iframe
class="aspect-ratio-16x9"
width="560"
height="315"
src="https://www.youtube.com/..."
title="YouTube video player"
frameborder="0"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>