首发博客地址
https://blog.zysicyj.top/
It has been 1086 days since the last update, the content of the article may be outdated.
这篇文章属于转载，原地址为Hexo博客援用B站视频并主动适配
在进行援用B站用iframe形式引入视频时发现，通过默认的形式导入会使得屏幕很小
[
](https://cdn.jsdelivr.net/gh/PaddyLin-xum/photo@master/4hgds.jpg)
个别咱们都是本人改width和height来批改大小，然而换成不同的设施就无奈失常的显示了。如下
默认：
<iframe src="//player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>批改后：
<iframe src="//player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="720"> </iframe>即可较好的适配大屏幕，然而到手机上就不太好用了，不能主动适配，怎么办呢，看上面的两种方法：
里面包裹一个div标签，div标签自适应与屏幕的大小，包裹内iframe以100%顶边撑开。以butterfly主题为例子：在source/css/_ global/function.styl下底部增加以下css代码：
.bilibili{ position: relative; width: 100%; height: 0; padding-bottom: 75%; }.bilibili iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0;}插入时写成如下模式即可：
<div class="bilibili"> <iframe src="//player.bilibili.com/player.html?bvid=BV1hF411C7ks&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></div>成果如下：
应用@media属性，对不同屏幕大小的设施，设置宽度和高度。@media能够查问到设施的以下属性
- 设施屏幕的高度
- 设施的方向（如挪动设施横屏）
- 可视窗口的宽高
- 屏幕解析度
和下面一样，在指定地位插入css代码：
.bilibili { position: relative; width: 100%;}@media only screen and (max-width: 767px) { .bilibili {height: 15em;max-width: 25em;}}@media only screen and (min-width: 768px) and (max-width: 991px) { .bilibili {height: 20em;max-width: 30em;}}@media only screen and (min-width: 992px) and (max-width: 1199px) { .bilibili {height: 30em;max-width: 40em;}}@media only screen and (min-width: 1200px) { .bilibili {height: 40em;max-width: 50em;}}而后间接援用B站的iframe代码加上class="bilibili"：
<iframe class="bilibili" src="//player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>[](#B站链接的参数 "B站链接的参数")B站链接的参数
例如：player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1
| key | 阐明 |
|---|---|
| aid | 视频ID 就是B站的av号 |
| cid | 应该是客户端的id,clientid的缩写（揣测） 测试示意不填也不会有什么问题 |
| page | 第几个视频 也就是分P的 默认是1 |
| as_wide | 是否宽屏 1：宽屏 0：小屏 |
| high_quality | 视频品质 1：最高视频品质 0：最低视频品质 |
| danmaku | 是否开启弹幕 1：开启（默认） 0：敞开 |
[](#阻止跳转B站 "阻止跳转B站")阻止跳转B站
在网页上, 用户抉择清晰度, 或者点击视频下面的一些图标, 会跳转到B站. 这个可通过设置 iframe 的 sandbox 属性去禁止
sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
<iframe src="//player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts> </iframe>[](#批改默认视频品质 "批改默认视频品质")批改默认视频品质
B站默认视频品质是最低的，能够通过在src链接前面增加&high_quality=1来设置
<iframe src="//player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts> </iframe>本文由mdnice多平台公布