YouTube 列表 YoutubeEmbedList

概览

YoutubeEmbedList 是 YouTubeEmbed 的列表版本，以网格布局展示多个 YouTube 视频，适合用于视频合集或教程页面。

使用方法

import { YoutubeEmbedList } from '@goenhance/cms-ui';

const Example = () => (
  <YoutubeEmbedList
    title="视频教程"
    list={[
      { url: "https://www.youtube.com/watch?v=abc123" },
      { url: "https://www.youtube.com/watch?v=def456" }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	区域标题
list	{ url: string }[]	-	YouTube 视频链接列表

特性

• 响应式网格：自动在 1-2 列之间切换。
• 16:9 比例：每个视频自动保持 16:9 宽高比。
• 懒加载：视频 iframe 按需加载，优化首屏性能。

---

主题覆盖

可覆盖变量

类名：mewx-cms-embed

变量名	用途	默认值
--mewx-cms-embed-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-embed-muted-text	描述文字色	var(--blocks-text-muted)

覆盖示例

/* 暗色嵌入组件 */
.dark-embed {
  --mewx-cms-embed-heading-text: 255 255 255;
  --mewx-cms-embed-muted-text: 148 163 184;
}

<YoutubeEmbedList className="dark-embed" title="视频教程" list={[...]} />