网站嵌入bilibili视频的一些总结

Andy Huang2024-03-012024-03-01

最近有一些这方面的需求

网上看了很久，这里大致的总结一下，备用

不多说，直接上干货，需要用得上的可以稍微看看

开始布局了解

直接打开我们需要嵌入的视频网页，点击视频下方的分享按钮，把嵌入代码复制，

先说一下外链引用的一些缺点：最重要的一点是清晰度默认只能显示最低的，这个是万万不能接受的，如何调清晰度后面会讲到，先学会引用先，一步一步来

先看看一个我视频的嵌入代码

<iframe src="//[player.bilibili.com/player.html?aid=76053337&](https://www.bilibili.com/read/cv6775208/#);bvid=[BV11J41127DF](https://www.bilibili.com/video/BV11J41127DF?from=articleDetail)&cid=130096191&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

那么如何改变样式大小呢？
只需要加入代码

1	width="100%" height="600"

这里的宽度和高度可以根据自己的需求自行修改定制

最终代码是这样的（已经加粗显示了，方便查看）：

<iframe src="//[player.bilibili.com/player.html?aid=76053337&](https://www.bilibili.com/read/cv6775208/#);bvid=[BV11J41127DF](https://www.bilibili.com/video/BV11J41127DF?from=articleDetail)&cid=130096191&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" **width="100%" height="600"**> </iframe>

视频清晰度的调节

先来看看我们的视频地址

1	//[player.bilibili.com/player.html?aid=76053337&](https://www.bilibili.com/read/cv6775208/#);bvid=[BV11J41127DF](https://www.bilibili.com/video/BV11J41127DF?from=articleDetail)&cid=130096191&page=1

修改一下我们的地址

在 // 前面加上 https:
在视频地址最后面加上 &high_quality=1

最终的成品是这样的，新增加的部分我已经加粗显示了

**https:**//[player.bilibili.com/player.html?aid=76053337&](https://www.bilibili.com/read/cv6775208/#);bvid=[BV11J41127DF](https://www.bilibili.com/video/BV11J41127DF?from=articleDetail)&cid=130096191&page=1**&high_quality=1**

移动端如何自适应

经过谷歌一下，找到了一些解决方法，这里直接给大家分享解密一下下

先直接看一下成品

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="[https://player.bilibili.com/player.html?aid=76053337&](https://www.bilibili.com/read/cv6775208/#);bvid=[BV11J41127DF](https://www.bilibili.com/video/BV11J41127DF?from=articleDetail)&cid=130096191&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no">
</iframe>
</div>

稍微解释一下上面代码的含义：