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 链接。
• 响应式支持：宽度自动填满父容器。