---
title: "如何在博客文章中插入YouTube视频"
url: https://lingming.blog/posts/2025/2025-07-30-youtube-guide/
date: 2025-07-30
lastmod: 2026-08-19
tags: ["hugo","博客教程","markdown","视频嵌入"]
categories: ["技术教程"]
description: "在 Hugo 文章中嵌入 YouTube 视频的完整方法：shortcode 的基本用法、如何从各种链接形式中取出视频 ID，以及带参数的高级用法和完整示例。"
---

# 如何在博客文章中插入YouTube视频


## 快速开始

在 Markdown 文章中插入 YouTube 视频非常简单，使用 Hugo 内置的短代码即可：

### 基本用法

```markdown
{{</* youtube VIDEO_ID */>}}
```

### 实际示例

假设 YouTube 视频链接是：`https://www.youtube.com/watch?v=dQw4w9WgXcQ`

只需在文章中写入：

```markdown
{{</* youtube dQw4w9WgXcQ */>}}
```

### 高级用法

设置自定义尺寸：
```markdown
{{</* youtube id="dQw4w9WgXcQ" width="100%" height="400" */>}}
```

设置开始时间（从30秒开始）：
```markdown
{{</* youtube id="dQw4w9WgXcQ" start="30" */>}}
```

### 获取视频ID的方法

1. 打开 YouTube 视频
2. 复制 URL 中 `v=` 后面的部分
3. 例如：`https://www.youtube.com/watch?v=ABC123DEF456` → `ABC123DEF456`

### 完整示例

```markdown
---
title: "我的旅行记录"
date: 2025-07-30
---

这次旅行记录了很多美好瞬间：

{{</* youtube dQw4w9WgXcQ */>}}

更多风景：

{{</* youtube m5d1FlB8kRs width="100%" height="400" */>}}
```

现在你就可以在博客文章中轻松添加 YouTube 视频了！