Skip to content

Extending Contentful Rich Text editor to render Youtube embed videos

Posted on:September 21, 2022 at 09:55 PM

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.

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.

Creating contentful 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).

{renderRichText(post.body, {
    renderNode: {
    [INLINES.HYPERLINK]: node => {
       ...
{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