【网站优化】B站视频优化版自适应嵌入代码

B站视频优化版自适应嵌入代码。

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

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

优化前B站默认的嵌入代码:

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

优化后:

<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=515946999&bvid=BV1jg411e7id&cid=845345304&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"

给TA打赏
共{{data.count}}人
人已打赏
源码分享资源分享

【网站源码】WordPress双端微信抖音壁纸小程序源码

2022-10-2 20:24:12

技术教程源码分享站长杂谈网站优化

【PHP源码】查询QQ特别关心API源码

2022-10-3 21:28:13

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
本站托管于柠檬云柠檬云