DEV Community

Miguel Crespo
Miguel Crespo

Posted on • Originally published at miguelcrespo.co

1

Extending Contentful Rich Text editor to render Youtube embed videos

Introduction

I'm currently using Contentful CMS to manage the content of my Gatsby blog, and recently I wanted to display YouTube embed videos on it and found out that it is not directly supported to render videos from sources like YouTube when using the Rich Text Editor, I think this is functionality that should be implemented by default, but thankfully the Rich Text Editor is highly customizable and doing the necessary changes to display the videos in your blog post won't take long to implement.

Add a link to the video using the rich text editor

First, you need to ask the link to the YouTube video using the Rich Text Editor, it doesn't matter which format the URL is as we will parse it later in the code.

Gif showing how to create a link

Modify the code to render the video

I'm using https://www.gatsbyjs.com/plugins/gatsby-source-contentful/ to connect my Gatsby blog with the Contentful Data, and this plugin already installs the @contentful/rich-text-react-renderer that we need in order to convert the normal content of a Rich Text Editor into HTML (Or React components in my case).

  • In the part of your code where you call the renderRichText function, you need to add a new value in your options object options:
{renderRichText(post.body, {
    renderNode: {
    [INLINES.HYPERLINK]: node => {
       ...
Enter fullscreen mode Exit fullscreen mode
  • Then inside this function we have a regex expression to extract the video ID and generate a URL with the right format that we need to render embed videos https://youtube.com/embed/${videoId}
{renderRichText(post.body, {
    renderNode: {
    // If the node is a link
    [INLINES.HYPERLINK]: node => {
        // Only process youtube links
        if (node.data.uri.includes("youtube.com")) {
            // Extract videoId from the URL
            const match = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/.exec(
                node.data.uri
            )
            const videoId =
                match && match[7].length === 11 ? match[7] : null
            return (
                videoId && (
                <section className="video-container">
                    <iframe
                        className="video"
                        title={`https://youtube.com/embed/${videoId}`}
                        src={`https://youtube.com/embed/${videoId}`}
                        allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
                        frameBorder="0"
                        allowFullScreen
                    />
                </section>
                )
            )
        }
    },
    },
})}
Enter fullscreen mode Exit fullscreen mode

Make the embed YouTube video responsive

If you want the video to take the entire width of the container but also keep the ratio, you need to add the following styles to the markup

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Final result

Image with an example of the final result

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay