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.

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

• 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>
                )
            )
        }
    },
    },
})}

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%;
}

Live result