本文演示如何在文章中嵌入各种视频平台的视频内容。

B站视频嵌入

使用 BV 号嵌入

{{< bilibili bvid=“BV1xx411c7mD” >}}

效果

哔哩哔哩视频

使用 AV 号嵌入

{{< bilibili aid=“170001” >}}

带参数的B站视频

支持的参数：

  • bvid: B站视频的BV号
  • aid: B站视频的AV号
  • cid: 分P视频的CID（可选）
  • page: 分P视频的页码，默认为1
  • autoplay: 是否自动播放，默认为false
  • danmaku: 是否显示弹幕，默认为true

示例（关闭弹幕、自动播放）：

{{< bilibili bvid=“BV1xx411c7mD” autoplay=“true” danmaku=“false” >}}

抖音视频嵌入

使用视频ID

{{< douyin id=“7123456789012345678” >}}

使用分享链接

{{< douyin url=“https://www.douyin.com/video/7123456789012345678" >}}

YouTube 视频嵌入

基础嵌入

{{< youtube id=“dQw4w9WgXcQ” >}}

带参数的YouTube视频

支持的参数：

  • id: YouTube视频ID（必需）
  • autoplay: 是否自动播放，默认为false
  • start: 从第几秒开始播放（可选）

示例（从30秒开始播放）：

{{< youtube id=“dQw4w9WgXcQ” start=“30” >}}

本地视频嵌入（HTML5）

基础嵌入

{{< video src="/videos/demo.mp4” >}}

带参数的本地视频

支持的参数：

  • src: 视频文件路径（必需）
  • poster: 视频封面图片（可选）
  • autoplay: 是否自动播放，默认为false
  • loop: 是否循环播放，默认为false
  • muted: 是否静音，默认为false
  • controls: 是否显示控制栏，默认为true

示例（带封面、循环播放）：

{{< video src="/videos/demo.mp4" poster="/img/video-cover.jpg" loop=“true” >}}

使用说明

1. 启用视频功能

在 hugo.toml 配置文件中启用视频功能：

[params.video]
  enable = true  # 是否启用视频嵌入功能

2. 在文章中使用

在Markdown文件中使用对应的shortcode即可：

{{< bilibili bvid="BV1xx411c7mD" >}}

3. 获取视频参数

B站视频

  • 打开B站视频页面
  • 从URL中获取BV号：https://www.bilibili.com/video/BV1xx411c7mD
  • 或者点击分享按钮，复制嵌入代码中的BV号

抖音视频

  • 打开抖音视频页面
  • 从URL中获取视频ID：https://www.douyin.com/video/7123456789012345678
  • 或者点击分享按钮，复制链接

YouTube视频

  • 打开YouTube视频页面
  • 从URL中获取视频ID：https://www.youtube.com/watch?v=dQw4w9WgXcQ
  • ID就是 v= 后面的部分

4. 响应式设计

所有嵌入的视频都采用16:9的响应式布局，会自动适应不同屏幕尺寸。

注意事项

  1. 性能优化：视频采用懒加载（loading="lazy"），仅在视口可见时才加载
  2. 隐私保护：使用 sandbox 属性限制iframe权限，提高安全性
  3. 无障碍访问：提供了平台标识和图标，方便用户识别视频来源
  4. 打印友好：打印时会显示提示文字，而不是空白区域
  5. 暗色模式：自动适配网站的暗色模式主题

常见问题

Q: 为什么视频无法播放？

A: 可能的原因：

  • 视频ID错误或视频已被删除
  • 浏览器安全策略限制（某些平台需要HTTPS）
  • 网络连接问题

Q: 可以自定义视频尺寸吗？

A: 默认采用16:9响应式布局。如需自定义，可以通过CSS覆盖 .video-container 的样式。

Q: 支持其他视频平台吗？

A: 目前支持B站、抖音、YouTube和HTML5本地视频。如需支持其他平台，可以参考现有shortcode代码自行添加。

更新日志

  • 2025-10-24: 初始版本，支持B站、抖音、YouTube和HTML5视频嵌入