B站 on 电商笔记https://a19dc1e7.blog-hugo-2f2.pages.dev/tags/b%E7%AB%99/Recent content in B站 on 电商笔记Hugozh-cnThu, 10 Sep 2026 22:30:00 +0800在文章里嵌入 B站视频https://a19dc1e7.blog-hugo-2f2.pages.dev/posts/bilibili-video-guide/Thu, 10 Sep 2026 22:30:00 +0800https://a19dc1e7.blog-hugo-2f2.pages.dev/posts/bilibili-video-guide/一行短代码把 B站视频放进文章，支持分P、弹幕开关、自定义比例，手机上自适应不变形。B站官方的嵌入代码又长又难记，这个站点配了一个短代码，一行就够了。

最快用法

把下面这行写进 Markdown（BV 号换成你自己的）：

{{< bilibili BV1GJ411x7h7 >}}

渲染出来是这样：

BV 号在视频页地址栏里，形如 https://www.bilibili.com/video/BV1GJ411x7h7/， 也可以直接写 av 号：{{< bilibili av170001 >}}。

⚠️ 位置写法只能单独用。一旦要带其它参数，就必须写成 id="BV..." —— 这是 Hugo 的规则，不允许位置参数和命名参数混用。

参数

参数 说明 默认值
id BV 号或 av 号，也可以直接写在第一个位置 必填
page 分P，第几个 P 1
danmaku 弹幕开关，1 开 0 关 0
autoplay 自动播放，1 开 0
muted 静音，默认跟随 autoplay 自动
ratio 画面比例 16/9
title iframe 的无障碍标题 哔哩哔哩视频

几个组合（下面是示例代码，不会真的插入视频）：

{{< bilibili id="BV1GJ411x7h7" page=2 >}}
{{< bilibili id="BV1GJ411x7h7" danmaku=1 autoplay=1 muted=1 >}}
{{< bilibili id="BV1GJ411x7h7" ratio="4/3" title="课程讲解" >}}

想开弹幕看看实际效果：

写文档时的一个坑

Hugo 对代码块里的 shortcode 也会执行，所以上面那些示例必须写成转义形式， 否则会真的插进去一个播放器：

{{< bilibili BV1xx >}}

看到的那对 /* */ 就是转义标记，页面上会显示成正常的短代码写法，方便复制。

几个必须知道的点

  1. 未登录访客大概率只能看 360P / 480P。这是 B站对嵌入播放器的限制，不是配置错了。想要高清得在 B站点登录账号，但访客看不到你的登录态。
  2. 播放器右上角会有"去B站看"和推荐浮层，官方嵌入代码去不掉。
  3. autoplay 在手机上基本会被浏览器拦掉，这是浏览器的自动播放策略，不是代码问题。
  4. 视频必须用 https 播放器地址，本站已经写死了 https://，不要手动改成 // 或 http，否则在 https 站点上会被浏览器拦成混合内容，白屏。

如果 shortcode 不好使

也可以用主题自带的 rawhtml 短代码直接贴官方嵌入代码：

{{< rawhtml >}}
<iframe src="https://player.bilibili.com/player.html?bvid=BV1GJ411x7h7&page=1&high_quality=1&danmaku=0"
        width="100%" height="500" scrolling="no" frameborder="0" allowfullscreen="true"></iframe>
{{< /rawhtml >}}

这样写不会有自适应比例，手机上可能变形，所以还是推荐上面的 bilibili 短代码。

]]>