Contentful Rich Text 편집기를 확장하여 Youtube 임베드 비디오 렌더링

소개

현재 Contentful CMS를 사용하여 내 Gatsby 블로그의 콘텐츠를 관리하고 있으며 최근에 YouTube 임베딩 비디오를 여기에 표시하고 싶었는데 Rich Text Editor를 사용할 때 YouTube와 같은 소스에서 비디오를 렌더링하는 것이 직접 지원되지 않는다는 것을 알게 되었습니다. , 이것이 기본적으로 구현되어야 하는 기능이라고 생각하지만 고맙게도 서식 있는 텍스트 편집기는 사용자 정의가 가능하고 블로그 게시물에 비디오를 표시하는 데 필요한 변경을 수행하는 데 오래 걸리지 않습니다.

서식 있는 텍스트 편집기를 사용하여 비디오에 대한 링크 추가

먼저 서식 있는 텍스트 편집기를 사용하여 YouTube 비디오에 대한 링크를 요청해야 합니다. 나중에 코드에서 구문 분석할 것이므로 URL 형식은 중요하지 않습니다.

비디오를 렌더링하도록 코드 수정

저는 https://www.gatsbyjs.com/plugins/gatsby-source-contentful/을 사용하여 내 Gatsby 블로그를 Contentful Data와 연결하고 있으며 이 플러그인은 서식 있는 텍스트 편집기의 일반 콘텐츠를 HTML(또는 제 경우에는 React 구성 요소)로 변환하는 데 필요한 @contentful/rich-text-react-renderer를 이미 설치하고 있습니다. ).

renderRichText 함수를 호출하는 코드 부분에서 옵션 개체 options에 새 값을 추가해야 합니다.

{renderRichText(post.body, {
    renderNode: {
    [INLINES.HYPERLINK]: node => {
       ...

그런 다음 이 함수 내에는 비디오 ID를 추출하고 내장 비디오를 렌더링하는 데 필요한 올바른 형식으로 URL을 생성하는 정규 표현식이 있습니다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>
                )
            )
        }
    },
    },
})}

포함된 YouTube 비디오를 반응형으로 만들기

비디오가 컨테이너의 전체 너비를 차지하면서 비율도 유지하려면 마크업에 다음 스타일을 추가해야 합니다.

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

최종 결과