基于Next.js静态预渲染的Netlify CMS博客如何嵌入YouTube视频？

我刚帮几个朋友搞定过类似的Next.js + Netlify CMS博客嵌入YouTube视频的需求，给你几个实用的方案，你可以根据团队贡献者的技术水平来选：

这个思路是让贡献者用极简的标记代替复杂的iframe代码，Next.js渲染时自动转换成可播放的视频，兼顾灵活性和易用性。

步骤1：让贡献者轻松输入短代码 #

• 要是贡献者懂点Markdown，直接告知他们用 {% youtube [视频ID] %} 的格式就行——视频ID就是YouTube链接里watch?v=后面的一串字符（比如https://www.youtube.com/watch?v=dQw4w9WgXcQ里的dQw4w9WgXcQ）。
• 想更友好？给Netlify CMS的编辑器加个自定义按钮：在config.yml的博文内容字段配置里，添加一个YouTube嵌入组件，点击后弹出输入框让用户粘贴链接，自动提取ID并插入短代码。示例配置：

collections:
  - name: "blog"
    label: "博客"
    fields:
      - { name: "title", label: "标题" }
      - { name: "author", label: "作者" }
      - name: "body"
        label: "正文"
        widget: "markdown"
        editor_components:
          - name: youtube
            label: "嵌入YouTube视频"
            widget: object
            fields:
              - { name: "id", label: "YouTube视频ID", required: true }

步骤2：在Next.js里解析短代码 #

用remark生态的插件或自定义逻辑，识别短代码并转换成响应式iframe。比如写个简单的remark插件：

import { remark } from 'remark';
import html from 'remark-html';
import { visit } from 'unist-util-visit';

// 自定义插件：解析youtube短代码
function remarkYoutube() {
  return (tree) => {
    visit(tree, 'code', (node) => {
      const match = node.value.match(/^{% youtube (\w+) %}$/);
      if (match) {
        const videoId = match[1];
        // 替换成响应式嵌入的iframe
        node.type = 'html';
        node.value = `
          <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
            <iframe 
              src="https://www.youtube.com/embed/${videoId}" 
              style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
              title="YouTube视频"
            ></iframe>
          </div>
        `;
      }
    });
  };
}

// 渲染Markdown时使用该插件
async function renderBlogContent(content) {
  const result = await remark()
    .use(remarkYoutube)
    .use(html)
    .process(content);
  return result.toString();
}

如果贡献者完全不懂Markdown，直接做一个可视化的嵌入控件，让他们粘贴链接就能生成内容，全程不用碰代码。

步骤1：注册自定义Widget #

在Netlify CMS的admin/index.html里添加以下代码：

CMS.registerWidget('youtube', {
  // 编辑器里的输入界面
  control: ({ value, onChange }) => {
    return h('input', {
      type: 'text',
      placeholder: '粘贴YouTube视频链接',
      value: value?.id || '',
      onChange: (e) => {
        const url = e.target.value;
        // 自动从链接提取视频ID
        const videoId = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/)?.[1];
        onChange({ id: videoId });
      }
    });
  },
  // 编辑器里的预览效果
  preview: ({ value }) => {
    if (!value?.id) return null;
    return h('div', { style: { paddingBottom: '56.25%', position: 'relative', height: 0 } },
      h('iframe', {
        src: `https://www.youtube.com/embed/${value.id}`,
        style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 0 },
        allowFullScreen: true
      })
    );
  },
  // 存储到Markdown的格式
  toMarkdown: (value) => {
    return `{% youtube ${value.id} %}`;
  },
  // 从Markdown读取数据的逻辑
  fromMarkdown: (value) => {
    const match = value.match(/^{% youtube (\w+) %}$/);
    return match ? { id: match[1] } : null;
  }
});

步骤2：在配置里启用Widget #

回到config.yml，给博文正文字段添加这个组件：

fields:
  - name: "body"
    label: "正文"
    widget: "markdown"
    editor_components:
      - name: youtube
        label: "嵌入YouTube视频"
        widget: youtube

这样贡献者在编辑器里就能看到专门的按钮，粘贴链接后直接预览视频，提交后自动生成短代码，再用方案1的解析逻辑渲染即可。

如果你的贡献者都是内部信任人员，可以直接让他们复制YouTube的嵌入代码（视频页面→分享→嵌入）粘贴到编辑器里。不过默认Netlify CMS会过滤iframe，需要在config.yml里允许：

fields:
  - name: "body"
    label: "正文"
    widget: "markdown"
    allowed_iframe_hosts:
      - "youtube.com"
      - "www.youtube.com"

这个方法操作最简单，但风险较高——如果有不可信的贡献者，可能插入恶意iframe，只适合小范围封闭团队使用。

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