博客中使用iframe标签嵌入B站视频（其它视频同理）调整宽高的问题

  • 12
  • 4,387 views
  • A+
所属分类：互联网·技术经验

昨天写博客的时候准备插入一个B站视频，发现B站点击分享会提供iframe嵌入视频，直接复制代码

<iframe src="//player.bilibili.com/player.html?aid=38722462&amp;cid=68272342&amp;page=1" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"> </iframe>

添加到了博客里，然而它默认的样式只有很小的一块，还需要手动添加width和height属性，手动设置了固定的宽和高之后，显示正常，本以为大功告成。

后来在手机上浏览发现了问题,视频框架太大了，已经超出了手机的宽度，看来并不能设置成固定数值，然后我把width和height都设置成了100%，这下宽正常了，手机也可以自适应了，但是高还是原来的高度没有变，因为height设置百分比和上一级的标签有关系导致不成功没有效果，遂开始寻找其它方式。历经波折各种实验终于成功了。

解决思路

height的值没法固定，但是width的值已经自适应了，只要根据width的值建立联系求出height的值设置就可以了。

解决办法

1.首先设置width=100%
2.然后给自己的iframe加一个id选择器，名字随便起

<iframe id='spkj' src="//player.bilibili.com/player.html?aid=38722462&cid=68272342&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100% > </iframe>

3.最后在博客中嵌入一段js代码

<script type="text/javascript">
document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px";
</script>

意思就是获取width的值，然后把height的值设置成width的0.76倍，这个数字可以按照你所需要的视频比例进行修改

注意：

1.getElementById后面括号里的值要和前面id设置的对应

2.js代码必须放到iframe标签的后面，否则会找不到元素导致不生效的。

3.支持markdown语法的博客编辑器比如typecho用!!!把js代码包住就可以嵌入js代码了。

全部代码如下：

<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=38722462&cid=68272342&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>
!!!
<script type="text/javascript">  
document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px";
</script>
!!!

 

2019.10.2补充

感谢Mikusad的提醒，在page=1后加上&high_quality=1，会默认播放获取到的最高清晰度。

因为普通游客用户最高可以获取到480P的，如果你的浏览器有登录过B站，存有B站的cookies，它会自动播放可以播放的最高画质如1080P。如果没登录的话也能默认播放480P的，比不加之前默认的360P清晰度也会好。

视频效果：《秦时明月之沧海横流》新OP《月光》发布

 

为了方便浏览，图片放到下面

 

问题解决之前的效果：

 

博客中使用iframe标签嵌入B站视频（其它视频同理）调整宽高的问题

博客中使用iframe标签嵌入B站视频（其它视频同理）调整宽高的问题

 

解决之后的效果：

 

博客中使用iframe标签嵌入B站视频（其它视频同理）调整宽高的问题

yishuihan

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论：12   其中：访客  0   博主  0

    • xalex xalex 1
      回复 2019年10月14日 20:24  沙发

      非常有用，还好选择了谷歌搜索，如果百度搜索的话估计就看不到这篇文章了。

        • yishuihan yishuihan 博主
          回复 2019年10月14日 22:25  1层

          @xalex 哈哈，欢迎找到路。百度收录了我几篇之后就再也没动静了，已放弃百度。

            • xalex xalex 1
              回复 2019年11月7日 16:11  2层

              @yishuihan 评论
              如上图，如果一篇博文里面加入多个视频，只有第一个视频是正常的，后面的视频比例都是不对的。

                • yishuihan yishuihan 博主
                  回复 2019年11月7日 22:24  3层

                  @xalex 看了一下，因为相同的的id选择器在同一个html元素中只能出现一次，所以你添加第二个第三个视频的时候，把第二个第三个的iframe标签的id选择器改个名字，比如第二个视频id改为spkj2，然后后面对应的js代码获取对象的id也改为spkj2就可以了。

                    • xalex xalex 1
                      2019年11月8日 11:45  4层

                      @yishuihan 有效。谢谢指点。

              • Mikusa Mikusa 1
                回复 2019年9月29日 23:29  板凳

                在从b站拿到的链接page=1后面加上 &high_quality=1 ，可以修改清晰度为1080p

                  • yishuihan yishuihan 博主
                    回复 2019年10月2日 12:18  1层

                    @Mikusa 测试了一下，因为B站不登录账号的话默认最高只能480P，如果浏览器登录过B站，有B站的cookies，它会自动显示最高的画质，如果没有登录过，最高也是480P。感谢提醒。

                  • Mikusa Mikusa 1
                    回复 2019年9月28日 22:07  地板

                    这个方法可行欸，感谢！

                      • yishuihan yishuihan 博主
                        回复 2019年9月28日 22:19  1层

                        @Mikusa 哈哈，能被人搜索到浏览了文章，而且还解决了问题，我还是很开心哒。

                          • 可视化 可视化 1
                            回复 2019年10月2日 11:22  2层

                            @yishuihan 赞一个，为了这个效果找了一下午的方法，结果全都没法用，最后也和博主一样想用宽度乘上比例来达到自适应高度的效果，但是苦于代码不知道咋打，谢谢大佬的方法！

                              • yishuihan yishuihan 博主
                                回复 2019年10月2日 12:54  3层

                                @可视化 哈哈，不客气哈。我想回访一下你的博客，但是我却打不开 :mrgreen:

                                  • 可视化 可视化 1
                                    2019年10月2日 15:43  4层

                                    @yishuihan 2333，现在可以了，之前被墙了（所以时不时会访问不了2333）