如何在ReactJS中使用react-markdown嵌入YouTube视频

标准Markdown本身没有原生的视频嵌入语法，所以react-markdown默认也不支持直接渲染视频。你可以通过自定义渲染组件的方式实现，下面是两种简单的方案：

方案一：通过自定义链接组件处理YouTube视频 #

你可以在Markdown文本中用普通链接标记视频地址，然后让react-markdown识别这类链接并渲染成iframe：

步骤1：修改Markdown内容 #

把视频链接写成普通的Markdown链接：

const md = `
   Hello video embedded from youtube.
   [我的YouTube视频](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
`

步骤2：配置ReactMarkdown的自定义组件 #

在components属性中覆盖a标签的渲染逻辑，判断是否是YouTube链接，若是则渲染iframe：

import ReactMarkdown from 'react-markdown'

function App() {
  const md = `
     Hello video embedded from youtube.
     [我的YouTube视频](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
  `

  return (
    <ReactMarkdown
      linkTarget="_blank"
      components={{
        a: ({ href, children, ...props }) => {
          // 识别YouTube链接（支持watch链接和短链接）
          const isYoutubeLink = href.startsWith('https://www.youtube.com/watch') || href.startsWith('https://youtu.be/');
          
          if (isYoutubeLink) {
            // 提取视频ID
            let videoId;
            if (href.includes('watch?v=')) {
              videoId = href.split('watch?v=')[1].split('&')[0];
            } else {
              videoId = href.split('youtu.be/')[1];
            }

            // 返回视频iframe
            return (
              <iframe
                width="560"
                height="315"
                src={`https://www.youtube.com/embed/${videoId}`}
                title={children}
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                style={{ margin: '1rem 0' }}
              />
            );
          }

          // 非YouTube链接保持默认渲染
          return <a href={href} target="_blank" {...props}>{children}</a>;
        }
      }}
    >
      {md}
    </ReactMarkdown>
  )
}

export default App

方案二：自定义Markdown标记（比如用） #

如果你想更明确地区分视频和普通图片/链接，可以用类似图片的标记，然后自定义img组件的渲染：

修改Markdown内容 #

const md = `
   Hello video embedded from youtube.
   ![YouTube视频](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
`

配置自定义img组件 #

<ReactMarkdown
  linkTarget="_blank"
  components={{
    img: ({ alt, src, ...props }) => {
      if (src.startsWith('https://www.youtube.com/watch') || src.startsWith('https://youtu.be/')) {
        let videoId;
        if (src.includes('watch?v=')) {
          videoId = src.split('watch?v=')[1].split('&')[0];
        } else {
          videoId = src.split('youtu.be/')[1];
        }
        return (
          <iframe
            width="560"
            height="315"
            src={`https://www.youtube.com/embed/${videoId}`}
            title={alt}
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            style={{ margin: '1rem 0' }}
          />
        );
      }
      // 普通图片保持默认渲染
      return <img src={src} alt={alt} {...props} />;
    }
  }}
>
  {md}
</ReactMarkdown>

这两种方案都不需要额外安装插件，完全基于react-markdown本身的扩展能力，适合新手快速实现需求。

内容的提问来源于stack exchange，提问作者USER2022