---
title: "Embed"
description: "This article explains what the embed field is and how to configure it."
meta_title: "Embed"
category: "fields"
audience: developers
lastUpdated: "2026-04-23T01:17:46.000Z"
---
The embed field allows content writers to provide an [oEmbed](https://en.wikipedia.org/wiki/OEmbed) URL, like a YouTube video or a Spotify song. The oEmbed URL's metadata and HTML content are available to developers.
Embed fields can be displayed using framework-specific components or React's `dangerouslySetInnerHTML`:
**Next.js example:**
```tsx
```
**Nuxt example:**
```vue-html
```
**SvelteKit example:**
```svelte
```
> **Important**
>
> When using one of Prismic's embed components or React's `dangerouslySetInnerHTML` prop, HTML from an embed field is directly injected into the page. Injecting external HTML makes your website vulnerable to [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
>
> Only embed HTML from trusted sources.
# Add an embed field to a content model
Embed fields are added using the [Type Builder](https://prismic.io/docs/type-builder.md), a tool for building by hand, or the [Prismic CLI](https://prismic.io/docs/cli.md), a tool for AI agents.
* **Type Builder:**
> **Important**
>
> Type Builder is rolling out to new users. If you do not have access, use **Slice Machine**.
1. **Watch for changes**
In your local website project, start the Prismic CLI's `sync` command. The CLI will watch for changes in the Type Builder and pull them into your project.
```sh
npx prismic sync --watch
```
> **Tip**: You can pull Type Builder changes at any time using `npx prismic
> sync`.
2. **Add an embed field**
In the Type Builder, navigate to the slice, page type, or custom type you want to modify. Add an **embed** field and provide the following:
* **Label**: The label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understandable name.
* **API ID**: The property name in the Content API. Use a short, snake-cased name.
You can now close the Prismic CLI `sync` command or add your next field.
* **Prismic CLI:**
> Your AI agent can perform these steps for you. See [Prismic with AI](https://prismic.io/docs/ai.md) for details.
1. **Add an embed field**
Use the `prismic field add embed` command to add an embed field to a slice.
```sh
npx prismic field add embed video --to-slice MySlice
```
Use `--to-type` to add the field to a page type or custom type instead.
```sh
npx prismic field add embed video --to-type page
```
* **Slice Machine:**
1. **Open Slice Machine**
In your Prismic project, start Slice Machine to begin editing content models.
```sh
npx start-slicemachine --open
```
2. **Add an embed field**
In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add an **embed** field.
The **label** determines the label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understandable name.
The **API ID** determines the property name in the Content API. Use a short, snake-cased name.
# Display embed fields
Prismic provides embed components for Nuxt and SvelteKit. In Next.js, use the standard [`dangerouslySetInnerHTML`](https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html) React prop to display embed HTML content.
**Next.js example:**
```tsx
import { SliceComponentProps } from "@prismicio/react";
export default function MySlice({ slice }: SliceComponentProps) {
return (
);
}
```
**Nuxt example:**
```vue-html
```
**SvelteKit example:**
```svelte
```
# Style embedded content
Apply a CSS class that targets child elements. This example displays a YouTube video at full width and with a 16:9 aspect ratio.
**Next.js example:**
```tsx
```
**Nuxt example:**
```vue-html
```
**SvelteKit example:**
```svelte
```
```css filename=styles.css
.youtube-video {
width: 100%;
}
.youtube-video > iframe {
width: 100%;
aspect-ratio: 16 / 9;
}
```
# Check if an embed field has a value
Use `isFilled.embed()` to check if an embed field has a value before using it.
```ts
import { isFilled } from "@prismicio/client";
if (isFilled.embed(slice.primary.my_embed_field)) {
// Do something if `my_embed_field` has a value.
}
```
[Learn more about `isFilled`](https://prismic.io/docs/technical-reference/prismicio-client/v7.md#isfilled)
# API response
Here is what a embed field looks like from the Content API:
```json
{
"example_embed": {
"height": 113,
"width": 200,
"embed_url": "https://www.youtube.com/watch?v=GtuLg6hcV3w",
"type": "video",
"version": "1.0",
"title": "Prismic — Basics",
"author_name": "Prismic",
"author_url": "https://www.youtube.com/channel/UCJq6AEgtWeZt7ziQ-fLKOeA",
"provider_name": "YouTube",
"provider_url": "https://www.youtube.com/",
"cache_age": null,
"thumbnail_url": "https://i.ytimg.com/vi/GtuLg6hcV3w/hqdefault.jpg",
"thumbnail_width": 480,
"thumbnail_height": 360,
"html": ""
}
}
```