Embed YouTube video Contentful Rich text

[jotafelix]

Hi Khaled!

I have a question regarding Gatsby and Contentful, hopefully you can help me to solve it. I getting into Gatsby and Contentful to create my portfolio site and blog and I found an issue.

I want to embed YouTube videos in my posts in the Rich text on Contentful.

I checked you’ve done in your post in your blog. Can you tell me how can I embed YouTube videos in the rich text? It will be pretty useful for me.

Hopefully you can help me and pretty sure more people who are trying to figure out how to make it.

Thank you for your time!

[Khaledgarbaya]

Hey @jotafelix, Thanks for the question I made a quick video about the topic hopefully it will answer your question.

Solution

We can simply use a normal Hyperlink and when rendering it we can intercept it and return an iframe instead of a href.

Solution

Given the following content type

{
  "name": "Video Embed",
  "description": "",
  "displayField": "markdownContent",
  "fields": [
    {
      "id": "markdownContent",
      "name": "markdownContent",
      "type": "Text",
      "localized": false,
      "required": false,
      "validations": [],
      "disabled": false,
      "omitted": false
    },
    {
      "id": "richTextContent",
      "name": "richTextContent",
      "type": "RichText",
      "localized": false,
      "required": false,
      "validations": [],
      "disabled": false,
      "omitted": false
    }
  ],
  "sys": {
    "space": {
      "sys": {
        "type": "Link",
        "linkType": "Space",
        "id": "08c3omjgrm89"
      }
    },
    "id": "videoEmbed",
    "type": "ContentType",
    "createdAt": "2020-01-03T22:34:02.275Z",
    "updatedAt": "2020-01-03T22:34:02.648Z",
    "environment": {
      "sys": {
        "id": "master",
        "type": "Link",
        "linkType": "Environment"
      }
    },
    "publishedVersion": 1,
    "publishedAt": "2020-01-03T22:34:02.648Z",
    "firstPublishedAt": "2020-01-03T22:34:02.648Z",
    "createdBy": {
      "sys": {
        "type": "Link",
        "linkType": "User",
        "id": "6WbtXutibD5JhYJqc69abf"
      }
    },
    "updatedBy": {
      "sys": {
        "type": "Link",
        "linkType": "User",
        "id": "6WbtXutibD5JhYJqc69abf"
      }
    },
    "publishedCounter": 1,
    "version": 2,
    "publishedBy": {
      "sys": {
        "type": "Link",
        "linkType": "User",
        "id": "6WbtXutibD5JhYJqc69abf"
      }
    }
  }
}

we can do that Gatsby using the following code

import React from "react"

import Layout from "../components/layout"
import { INLINES } from "@contentful/rich-text-types"
import { documentToReactComponents } from "@contentful/rich-text-react-renderer"

const options = {
  renderNode: {
    [INLINES.HYPERLINK]: node => {
      if (node.data.uri.indexOf("youtube.com") !== -1) {
        return (
          <iframe
            width="560"
            height="315"
            src={node.data.uri}
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        )
      }
    },
  },
}

const IndexPage = ({ data }) => (
  <Layout>
    <h2>Markdown embed </h2>
    <div
      dangerouslySetInnerHTML={{
        __html:
          data.allContentfulVideoEmbed.nodes[0].markdownContent
            .childMarkdownRemark.html,
      }}
    />
    <h2> Rich text </h2>
    <div>
      {documentToReactComponents(
        data.allContentfulVideoEmbed.nodes[0].richTextContent.json,
        options
      )}
    </div>
  </Layout>
)

export default IndexPage
export const query = graphql`
  {
    allContentfulVideoEmbed {
      nodes {
        markdownContent {
          childMarkdownRemark {
            html
          }
        }
        richTextContent {
          json
        }
      }
    }
  }
`

and this is the final result

[jotafelix]

Hi @Khaledgarbaya , I am sorry for late respond, thank you so much for the tutorial, it will helped me to understand how to embed youtube video on Contentful. It's so useful!

Thanks again!