Rendering the Embed field

Prismic no longer recommends the gatsby-source-prismic-graphql plugin

With recent changes to Gatsby, Prismic no longer recommends the gatsby-source-prismic-graphql plugin that this documentation uses. Read more about the future of Prismic and Gatsby. We highly recommend using the gatsby-source-prismic instead. The documentation for this plugin can be found in the plugin's github README.

We will leave this documentation here for now, but will change it in the future when we determine the best approach for Prismic & Gatsby.

The Embed field will let content authors paste an oEmbed supported service resource URL (YouTube, Vimeo, Soundcloud, etc.), and below you can see how to render the embedded content in your project.

A full example

Here is a full page component example of how to retrieve and render the HTML for an Embed field. Notice how the field is included in the query, retrieved, and templated on the page. The API ID of the Embed field is video.

Copy
import React from 'react'
import { graphql } from 'gatsby'

const Page = ({ data }) => {
  const prismicContent = data.prismic.allPages.edges[0]
  if (!prismicContent) return null
  const document = doc.node

  return (
    <div dangerouslySetInnerHTML={{ __html: document.video.html }} />
  )
}

export const query = graphql`
query {
  prismic {
    allPages(uid: "test-page") {
      edges {
        node {
          video
        }
      }
    }
  }
}
`

export default Page