Core Concepts > Content Modeling > Fields > Embed

Configure the Embed Field

This article explains what the Embed field is and how to configure it in the Custom Type builder.

The Embed field allows you to add a valid oEmbed URL, like YouTube, Vimeo, or Soundcloud.

Screenshot of the Embed field in the drag-and-drop editor.

You can read more about the oEmbed format, view a list of supported providers, and see more examples of JSON responses on the oEmbed website.

The visual builder

When configuring an Embed field, you'll see the options to set the Field name, API ID, and Field placeholder.

Screenshot of the Embed field editor.

JSON model

The following table displays the JSON configuration options available in the JSON editor.

type

string (required)

Value must be Embed

config

object

Object for the configuration options

config.label

string

The label that shows up for the field in the document editor

config.placeholder

string

A user-friendly placeholder for the field in the entry editor

Example JSON configuration

The following JSON defines an Embed field with label and placeholder:

Copy
"example_embed": {
  "type": "Embed",
  "config": {
    "label": "oEmbed Link",
    "placeholder": "Paste an oEmbed supported service resource URL"
  }
}

API response example

Here is an API response example of an Embed field with the API ID of example_embed:

Copy
// API response example of an Embed field

{
  // ...
  "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>"
  }
}
Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.