Getting started

The Astro Embed package provides components for adding rich media from third-party services to your Astro website.

Installation

npm

npm i astro-embed

yarn

yarn add astro-embed

pnpm

pnpm add astro-embed

Using the components

Astro Embed components can be used in Astro and MDX files. Each component expects an id prop identifying the resource to be embedded.

In Astro files

To use components in .astro files, import them in the component script and then use them in your template:

src/components/Example.astro

---
import { Tweet, Vimeo, YouTube } from 'astro-embed';
---

<Tweet id="https://twitter.com/astrodotbuild/status/1512144306898976768" />

<Vimeo id="https://vimeo.com/32001208" />

<YouTube id="https://youtu.be/xtTy5nKay_Y" />

In MDX files

When using the Astro MDX integration, you can also import and use the embed components in MDX files:

src/content/examples/page.mdx

---
title: My MDX page with embed components
---

import { Tweet, Vimeo, YouTube } from 'astro-embed';

Hey look! I can embed a tweet _in Markdown_!

<Tweet id="https://twitter.com/astrodotbuild/status/1512144306898976768" />

Vimeo and YouTube videos work too :-)

<Vimeo id="https://vimeo.com/32001208" />
<YouTube id="https://youtu.be/xtTy5nKay_Y" />

Auto-embed URLs in MDX

Use the Astro Embed integration to automatically convert URLs in MDX files to embed components.

Learn how to set up the integration in the “Auto-embed URLs” guide.

Supported services

Astro Embed currently supports the following services:

Baseline

Open Graph

Twitter

Vimeo

YouTube