21. B站视频嵌入指南

404 字
2 分钟
21. B站视频嵌入指南

视频说明: 测试

出处: 哔哩哔哩 - 喜多川


B站视频嵌入指南#

在博客文章中嵌入 B 站视频可以丰富内容形式,提升用户体验。本指南将详细介绍如何在 Firefly(流萤)Astro 博客中嵌入 B 站视频。

1. 获取视频嵌入代码#

方法一:B站分享按钮获取#

  1. 打开 B 站视频页面
  2. 点击视频下方的「分享」按钮
  3. 选择「嵌入代码」
  4. 复制生成的 iframe 代码

方法二:手动构造嵌入URL#

//player.bilibili.com/player.html?bvid=视频BV号&page=1

2. 响应式视频嵌入#

为了在不同设备上显示良好,建议使用响应式嵌入:

<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe
src="//player.bilibili.com/player.html?bvid=BV1EZ4y1o74Z&page=1&high_quality=1&autoplay=false"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"
>
</iframe>
</div>

3. 常用参数说明#

参数说明示例值
bvid视频 BV 号BV1EZ4y1o74Z
aid视频 AV 号12345678
page视频分 P 数1
high_quality高质量播放1
autoplay自动播放true / false

4. 其他视频平台#

YouTube#

<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
allowfullscreen
style="width: 100%; height: 400px;"
>
</iframe>

腾讯视频#

<iframe
src="//v.qq.com/iframe/player.html?vid=abc123&tiny=0&auto=0"
frameborder="0"
allowfullscreen
style="width: 100%; height: 400px;"
>
</iframe>

5. 常见问题#

视频不显示?

  • 检查网络连接
  • 确认视频可公开访问
  • 验证嵌入代码正确

视频加载慢?

  • 使用懒加载
  • 限制同一页面视频数量
  • 考虑使用视频封面图替代

希望本指南能帮助你在博客中更好地使用视频内容!

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或赞助支持!

赞助
21. B站视频嵌入指南
https://blogboy.eu.cc/posts/21/
作者
Coldairboy
发布于
2026-04-13
许可协议
CC BY-NC-SA 4.0

评论区

Profile Image of the Author
Coldairboy
记录学习笔记、折腾过程和日常灵感。
公告
Hi,欢迎来到 Coldairboy学习笔记。
音乐
封面

音乐

暂未播放

0:00 0:00
暂无歌词
分类
标签
站点统计
文章
31
分类
3
标签
5
总字数
36,702
运行时长
0 天
最后活动
0 天前

目录