YouTube 嵌入 YouTubeEmbed

概览

YouTubeEmbed 通过提取视频 ID，在页面中生成一个保持 16:9 比例的响应式视频播放器。

实时预览

使用方法

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

const Example = () => (
  <YouTubeEmbed
    youtubeUrl="https://www.youtube.com/watch?v=..."
  />
);

属性说明 (Props)

属性	类型	默认值	说明
youtubeUrl	string	-	YouTube 视频链接 (支持 watch 或 short 格式)
title	string	”YouTube video player”	Iframe 的 title 属性
width	string	”100%“	播放器宽度
height	string	”100%“	播放器高度

特性

• 比例保持：基于 CSS 实现 16:9 比例锁定，确保视频不因拉伸而变形。
• 链接解析：内置正则表达式，支持多种格式的 YouTube 链接。
• 响应式支持：宽度自动填满父容器。

---

主题覆盖

可覆盖变量

类名：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;
}

<YouTubeEmbed className="dark-embed" youtubeUrl="https://www.youtube.com/watch?v=..." />