今天长本事了哈，起因是因为想把哔哩哔哩的一段视频嵌入到网页中，本来使用官方的代码是可以的，但是我发现官方的代码在宽屏幕的状况下，两边会出现黑边，很严重的黑边。

官方提供的iframe代码

1
<iframe src="//player.bilibili.com/player.html?aid=375588815&bvid=BV1so4y1m7U5&cid=339262048&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

话说我想着这也太难看了，就在网上搜了一下解决方案，有大神修改的官方的iframe代码，来达成自己想要的效果，

1
2
3
<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=995041626&bvid=BV14s4y127Me&cid=1099182253&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
</div>

看明显这两串代码是不一样的，第二个代码要比第一个多了很多东西，

参数说明

  • high_quality=1: 设置视频为最高画质（1080P）。
  • danmaku=0: 关闭弹幕。
  • allowfullscreen: 允许全屏播放。
  • sandbox: 限制iframe中的内容，防止跳转到B站
  • as_wide=1: 设置为宽屏模式。
  • width=”100%” height=”500”: 设置iframe的宽度和高度，可以根据需要调整

第二段代码要是简单的修改bvid并不会直接显示你要嵌入的视频，还需要修改aid和cid，但是这个aid和cid咱们要怎么获取呢？

网上的方法很多，我就写一下我使用的方法哈，直接在我们要嵌入的哔哩哔哩视频页面右键→检查，


随便打开一个total就会有显示aid和cid，甚至bvid也会一起显示哈。

牛逼，果然网上是有真大神。嘎嘎。