B站视频嵌入博客文章的自适应代码

长风化羽 2022-10-5

1535 71

在编辑博客时,需要嵌入B站视频,但复制B站给的嵌入代码后会发现宽度和高度属性都没有,无法自适应div,单独设置宽度和高度也不太完美,如何解决这个问题?

用下面这段代码,只需要替换aid即可:

<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=900831672&bvid=BV1VN4y1K76x&cid=839712989&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100% sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"> </iframe>
<script type="text/javascript">  
document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px";
</script>

这段代码可以使嵌入文章的B站视频自适应div的宽度,效果如下:

其中的代码:

sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"

可以使点击的弹出链接失效,避免外链跳出本站,如果不需要这个效果,删掉这段代码即可。

收藏本站,已备不时之需吧。

提取码:
签名:这个人很懒,什么也没有留下!
最新回复 (71)
  • 回电话 2022-10-9
    2
    刀云有你
    签名:这个人很懒,什么也没有留下!
  • 隔壁老王 2022-10-9
    3
    太强了
    签名:这个人很懒,什么也没有留下!
  • jianggou001 2022-10-9
    4
    谢谢
    签名:这个人很懒,什么也没有留下!
  • heiyanshoot 2022-10-9
    5
    楼主好人
    签名:这个人很懒,什么也没有留下!
  • Bubobo 2022-10-9
    6
    刀云有你更美好
    签名:这个人很懒,什么也没有留下!
  • 拉7月丿 2022-10-9
    7
    感谢分享
    签名:这个人很懒,什么也没有留下!
  • 8
    大佬
    签名:这个人很懒,什么也没有留下!
  • 小呆 2022-10-9
    9
    试试
    签名:这个人很懒,什么也没有留下!
  • tdiy 2022-10-9
    10
    刀云有你更美好
    签名:这个人很懒,什么也没有留下!
  • unqwerasdf 2022-10-9
    11
    谢谢分享
    签名:这个人很懒,什么也没有留下!
  • pop456456 2022-10-9
    12
    看看
    签名:这个人很懒,什么也没有留下!
  • 泪灼 2022-10-9
    13
    感谢有你
    签名:这个人很懒,什么也没有留下!
  • 597331944 2022-10-9
    14
    签名:这个人很懒,什么也没有留下!
  • bronya 2022-10-9
    15
    赞一个
    签名:这个人很懒,什么也没有留下!
  • 单刀稳场 2022-10-9
    16
    赞一个
    签名:这个人很懒,什么也没有留下!
  • 纪念币吧 2022-10-9
    17
    感谢分享
    签名:这个人很懒,什么也没有留下!
  • z870628 2022-10-9
    18
    谢谢
    签名:这个人很懒,什么也没有留下!
  • winnerzb87 2022-10-9
    19
    谢谢分享
    签名:这个人很懒,什么也没有留下!
  • 歼灭天使 2022-10-12
    20
    谢谢
    签名:这个人很懒,什么也没有留下!
返回