Embed

The embed field allows content writers to provide an oEmbed URL, like a YouTube video or a Spotify song.

The oEmbed URL’s metadata and HTML content are available to developers.

Add a embed field to a content model

• Open Slice Machine

  In your Prismic project, start Slice Machine to begin editing content models.

  npx start-slicemachine --open

• Add a 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. Use an easily understood name.

  The API ID determines the property name in the Document API. Use a short, snake-cased name.

Display embed fields

Prismic provides embed components for Nuxt and SvelteKit.

In Next.js, the standard dangerouslySetInnerHTML React prop is used.

<div dangerouslySetInnerHTML={{ __html: slice.primary.youtube_video.html }} />

Tips

• Embed HTML with caution

  When using one of Prismic’s embed compomnents 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) attacks.

  Only embed HTML from trusted sources.

• Style embeded 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.jsNuxtSvelteKit

  <div
    dangerouslySetInnerHTML={{ __html: slice.primary.youtube_video }}
    className="youtube-video"
  />

  styles.css

  Copy

  .youtube-video {
    width: 100%;
  }
  
  .youtube-video > iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

• Use isFilled.embed() to check if a embed field has a value

  import { isFilled } from "@prismicio/client";
  
  if (isFilled.embed(slice.primary.my_embed_field)) {
    // Do something if `my_embed_field` has a value.
  }

API response

Here is what a embed field looks like from the Document API:

{
  "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>"
  }
}