← 返回网页版

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

在 Hugo 文章中嵌入 YouTube 视频的完整方法：shortcode 的基本用法、如何从各种链接形式中取出视频 ID，以及带参数的高级用法和完整示例。

2025-07-30Lingming约 1 分钟 https://lingming.blog/posts/2025/2025-07-30-youtube-guide/

快速开始

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

基本用法

1

{{< youtube VIDEO_ID >}}

实际示例

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

只需在文章中写入：

1

{{< youtube dQw4w9WgXcQ >}}

高级用法

设置自定义尺寸：

1

{{< youtube id="dQw4w9WgXcQ" width="100%" height="400" >}}

设置开始时间（从30秒开始）：

1

{{< youtube id="dQw4w9WgXcQ" start="30" >}}

获取视频ID的方法

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

完整示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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

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

{{< youtube dQw4w9WgXcQ >}}

更多风景：

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

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