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

  • 12
  • 4,294 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

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

        • yishuihan yishuihan 博主

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

            • xalex xalex 1

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

                • yishuihan yishuihan 博主

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

                    • xalex xalex 1

                      @yishuihan 有效。谢谢指点。

              • Mikusa Mikusa 1

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

                  • yishuihan yishuihan 博主

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

                  • Mikusa Mikusa 1

                    这个方法可行欸,感谢!

                      • yishuihan yishuihan 博主

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

                          • 可视化 可视化 1

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

                              • yishuihan yishuihan 博主

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

                                  • 可视化 可视化 1

                                    @yishuihan 2333,现在可以了,之前被墙了(所以时不时会访问不了2333)