使用 iframe 在网页中嵌入哔哩哔哩播放器-未完纪

把哔哩哔哩视频放进网页，可以用 iframe 引用官方外链播放器，再用一个容器控制尺寸。下面分成嵌入结构、完整示例和 CSS 三部分，按需替换视频地址即可。

1. iframe 嵌入结构

先准备外层容器，再放入 iframe。下面的 src 暂时留空，使用前必须填写播放器地址；不要把普通视频页面地址直接当作外链播放器地址。

<div class="bilibili">
  <!-- 将 src 的空值替换为目标视频的播放器地址 -->
  <iframe src=""
    title="哔哩哔哩视频播放器"
    scrolling="no" border="0" frameborder="0" framespacing="0"
    allowfullscreen></iframe>
</div>

2. 完整 HTML 示例

下面保留一组具体视频参数，方便看清完整结构。实际使用时，换成你有权嵌入的视频及其对应参数。该视频当前是否可播放、是否允许站外播放，需要以哔哩哔哩的实际状态为准。

<div class="bilibili">
  <iframe
    src="https://player.bilibili.com/player.html?aid=541924889&amp;bvid=BV1zi4y1M7TP&amp;cid=381273831&amp;page=1"
    title="哔哩哔哩视频播放器"
    scrolling="no" border="0" frameborder="0" framespacing="0"
    allowfullscreen></iframe>
</div>

播放器入口是 https://player.bilibili.com/ 所列的 https://player.bilibili.com/player.html。按照官方文档，aid 和 bvid 选择其一即可；多 P 视频使用 p 参数，从 1 开始计数，提供 cid 时 p 不生效。上面保留的 page=1 属于历史嵌入写法，当前文档未列出 page，不应依赖它切换分 P；新嵌入请按官方文档配置 p 与 cid。

HTML 属性使用英文半角引号。地址里的 & 是 HTML 中表示 & 的写法，浏览器解析后仍是正常的查询参数分隔符。不要把整段 HTML 再转义一次，也不要把弯引号复制进代码。

3. CSS：由网站管理员加入样式表

下面的样式让 iframe 填满外层容器。HTML 放在页面允许嵌入代码的位置，CSS 则由网站管理员加入合适的样式表；这两部分需要配合使用。

.bilibili {
  position: relative;
  width: 100%;
  height: 0; /* 将内容高度设为 0，用底部内边距撑开容器 */
  padding-bottom: 75%; /* 4:3；16:9 可改为 56.25% */
}

.bilibili iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: 0;
}

这里的 padding-bottom: 75% 对应 4:3 宽高比，16:9 视频可改为 56.25%。也可以在 68% 到 80% 之间调整，但那只是改变容器的高宽比例，不能保证适合每个视频。height: 0 是这个比例容器方案的设置，并不是说 height 属性本身无效。

示例保留了常见旧嵌入代码中的 scrolling、border、frameborder 和 framespacing。它们属于旧式或非标准写法，不应依赖所有浏览器都支持；边框已同时用 CSS 的 border: 0 控制。allowfullscreen 用来允许播放器请求全屏，实际能否全屏还受浏览器与站点权限策略影响。

使用前检查页面编辑器是否允许 iframe，以及视频本身的授权、可见范围和站外播放限制。这里展示代码结构，不代表所有视频、浏览器或网站环境都已实测通过。

技术文档：哔哩哔哩外链播放器使用文档；MDN iframe 元素说明。

文章版权归作者所有，未经允许请勿转载。

THE END