---
title: "Youtube 扩展"
description: "在 Tiptap 中使用 Youtube 扩展，轻松将 Youtube 视频嵌入到您的文档中。详细信息请查看我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/youtube"
---

# Youtube 扩展

在 Tiptap 中使用 Youtube 扩展，轻松将 Youtube 视频嵌入到您的文档中。详细信息请查看我们的文档！

此扩展为编辑器添加了一个新的 YouTube 嵌入节点。

> **Interactive demo:** [YouTube](https://embed.tiptap.dev/preview/Nodes/YouTube)

## 安装

```bash
npm install @tiptap/extension-youtube
```

## 设置

### inline

控制节点是作为行内还是块处理。

默认: `false`

```js
Youtube.configure({
  inline: false,
})
```

### width

控制添加视频的默认宽度

默认: `640`

```js
Youtube.configure({
  width: 480,
})
```

### height

控制添加视频的默认高度

默认: `480`

```js
Youtube.configure({
  height: 320,
})
```

### controls

启用或禁用 YouTube 视频控制

默认: `true`

```js
Youtube.configure({
  controls: false,
})
```

### nocookie

启用 YouTube 嵌入的 nocookie 模式

默认: `false`

```js
Youtube.configure({
  nocookie: true,
})
```

### allowFullscreen

允许 iframe 以全屏模式播放

默认: `true`

```js
Youtube.configure({
  allowFullscreen: false,
})
```

### autoplay

允许 iframe 在播放器加载后自动播放

默认: `false`

```js
Youtube.configure({
  autoplay: true,
})
```

### ccLanguage

指定播放器将用于显示字幕的默认语言。将参数的值设置为 ISO 639-1 两个字母的语言代码。例如，将其设置为 `es` 将导致字幕为西班牙语。

默认: `undefined`

```js
Youtube.configure({
  ccLanguage: 'es',
})
```

### ccLoadPolicy

将此参数的值设置为 `true` 会导致默认显示字幕，即便用户已关闭字幕。

默认: `false`

```js
Youtube.configure({
  ccLoadPolicy: true,
})
```

### disableKBcontrols

禁用 iframe 播放器的键盘控制

默认: `false`

```js
Youtube.configure({
  disableKBcontrols: true,
})
```

### enableIFrameApi

允许通过 IFrame Player API 调用控制播放器

默认: `false`

```js
Youtube.configure({
  enableIFrameApi: true,
})
```

### origin

该参数为 IFrame API 提供了额外的安全措施，仅支持 IFrame 嵌入。如果您正在使用 IFrame API，这意味着您将 `enableIFrameApi` 参数的值设置为 `true`，您应始终将您的域指定为 `origin` 参数的值。

默认: `''`

```js
Youtube.configure({
  origin: 'yourdomain.com',
})
```

### endTime

该参数指定播放器在视频开始后的秒数时应停止播放视频。
例如，将其设置为 `15` 将使视频在 15 秒处停止。

默认: `0`

```js
Youtube.configure({
  endTime: '15',
})
```

### interfaceLanguage

设置播放器的界面语言。参数值为 ISO 639-1 两个字母的语言代码。例如，将其设置为 `fr` 将使界面为法语。

默认: `undefined`

```js
Youtube.configure({
  interfaceLanguage: 'fr',
})
```

### ivLoadPolicy

将其设置为 1 会导致默认显示视频注释，而设置为 3 会导致默认不显示视频注释。

默认: `0`

```js
Youtube.configure({
  ivLoadPolicy: '3',
})
```

### loop

该参数在 IFrame 嵌入中支持有限。要循环播放单个视频，请将循环参数值设置为 `true`，并将播放列表参数值设置为在播放器 API URL 中指定的同一视频 ID。

默认: `false`

```js
Youtube.configure({
  loop: true,
})
```

### playlist

该参数指定要播放的视频 ID 的以逗号分隔的列表。

默认: `''`

```js
Youtube.configure({
  playlist: 'VIDEO_ID_1,VIDEO_ID_2,VIDEO_ID_3,...,VIDEO_ID_N',
})
```

### modestBranding

禁用播放器控制栏上的 YouTube logo。请注意，当用户的鼠标指针悬停在播放器上时，暂停视频的右上角仍会显示小的 YouTube 文本标签。

默认: `false`

```js
Youtube.configure({
  modestBranding: true,
})
```

### progressBarColor

该参数指定播放器视频进度条中使用的颜色。请注意，将颜色参数设置为 `white` 将禁用 `modestBranding` 参数。

默认: `undefined`

```js
Youtube.configure({
  progressBarColor: 'white',
})
```

## 命令

### setYoutubeVideo(options)

在当前位置插入一个 YouTube iframe 嵌入

```js
editor.commands.setYoutubeVideo({
  src: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
  width: 640,
  height: 480,
})
```

#### 选项

| 选项     | 描述                                             | 可选 |
| ------ | ---------------------------------------------- | -- |
| src    | YouTube 视频的 URL。可以是 YouTube 或 YouTube Music 链接 |    |
| width  | 嵌入的宽度（覆盖默认选项，可选）                               | ✅  |
| height | 嵌入的高度（覆盖默认选项，可选）                               | ✅  |

## 源代码

[packages/extension-youtube/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-youtube/)