---
title: "Embed"
description: "This article explains what the embed field is and how to configure it."
meta_title: "Embed"
category: "fields"
audience: developers
lastUpdated: "2025-11-06T01:07:50.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
<div dangerouslySetInnerHTML={{ __html: slice.primary.youtube_video.html }} />
```

**Nuxt example:**

```vue-html
<div v-html="slice.primary.youtube_video.html" />
```

**SvelteKit example:**

```svelte
<script lang="ts">
  import { PrismicEmbed } from "@prismicio/svelte";
</script>

<PrismicEmbed field={slice.primary.youtube_video} />
```

> **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

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 a **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 understood 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 (
    <section>
      <div
        dangerouslySetInnerHTML={{ __html: slice.primary.youtube_video.html }}
      />
    </section>
  );
}
```

**Nuxt example:**

```vue-html
<section>
  <div v-html="slice.primary.youtube_video.html" />
</section>
```

**SvelteKit example:**

```svelte
<script lang="ts">
  import { PrismicEmbed } from "@prismicio/svelte";
</script>

<section>
  <PrismicEmbed field={slice.primary.youtube_video} />
</section>
```

# 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
<div
  dangerouslySetInnerHTML={{ __html: slice.primary.youtube_video.html }}
  className="youtube-video"
/>
```

**Nuxt example:**

```vue-html
<div
  v-html="slice.primary.youtube_video.html"
  class="youtube-video"
/>
```

**SvelteKit example:**

```svelte
<PrismicEmbed field={slice.primary.youtube_video} class="youtube-video" />
```

```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": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/GtuLg6hcV3w?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
  }
}
```