跳转至

YouTube 视频

YouTube shortcode 用于在 Markdown 内容中嵌入 YouTube 视频。视频会居中显示，并自适应设备屏幕尺寸。

用法

在 Markdown 中使用以下语法：

{{< youtube id="VIDEO_ID" >}}

参数

  • id (必需): YouTube 视频的 ID，例如 dQw4w9WgXcQ

示例

嵌入一个 YouTube 视频：

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

特性

  • 居中显示: 视频容器使用 Flexbox 居中对齐
  • 响应式设计: 最大宽度 560px，16:9 宽高比，自适应不同屏幕尺寸
  • 无障碍支持: iframe 包含 title 属性和 allowfullscreen 属性
  • 错误处理: 如果未提供 id 参数，会显示错误信息

技术实现

该 shortcode 使用 Hugo 的模板语法生成响应式的 iframe 嵌入代码。视频容器使用 CSS Flexbox 进行居中，并通过 aspect-ratio 属性保持 16:9 的宽高比，确保在不同设备上的一致显示效果。