Images, video and embeds

Add images, videos and embedded pages with Markdown or HTML. Images open in a zoom viewer when readers click them.

👀 See it

Click the logo to zoom in:

🧰 Use it

Put images in a folder that the build copies to the site, such as public or src/assets. Then reference them by their path in the built site:

![NgDoc logo](assets/images/brand/logo.svg)

The path is resolved against the base URL of the site, not against the Markdown file. Keep images in your repository instead of linking to other sites, so they don't disappear or change.

Images with HTML

Use an img element to set the size or other attributes:

<img src="assets/images/brand/logo.svg" alt="NgDoc logo" width="96" height="96" />

Disable zoom

Add zoom="false" to an img element to turn off the zoom viewer for that image:

<img src="assets/images/brand/logo.svg" alt="NgDoc logo" width="96" height="96" zoom="false" />

Markdown image syntax can't set attributes, so use HTML for images without zoom.

Video

Use the native video element for video files from your assets:

<video controls width="640" src="assets/videos/getting-started.mp4"></video>

Embedded pages

Use an iframe element to embed a page from another site, such as a code sandbox or a video platform:

<iframe src="https://example.com/embed" title="Example embed" width="100%" height="400" loading="lazy"></iframe>

Give every iframe a title for screen readers, and use loading="lazy" so it doesn't slow down the page.

🚧 Gotchas

Warning

Embedded pages load code from another site on every visit. Prefer demos (Demos) for examples of your own components.

Next: Diagrams