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.

Embed fields can be displayed using framework-specific components or React’s dangerouslySetInnerHTML:

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

Add an 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 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. 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 React prop to display embed HTML content.

import { SliceComponentProps } from "@prismicio/react";

export default function MySlice({ slice }: SliceComponentProps) {
  return (
    <section>
      <div
        dangerouslySetInnerHTML={{ __html: slice.primary.youtube_video.html }}
      />
    </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.

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

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

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