在编辑博客时,需要嵌入B站视频,但复制B站给的嵌入代码后会发现宽度和高度属性都没有,无法自适应div,单独设置宽度和高度也不太完美,如何解决这个问题?
![图片[1]-B站视频嵌入博客文章的自适应代码-金牛区随心笔记商贸部](https://www.17only.net/wp-content/uploads/2022/10/image-1.png)
用下面这段代码,只需要替换aid即可:
<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=43090056&bvid=BV1jb411S793&cid=75542427&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"
可以使点击的弹出链接失效,避免外链跳出本站,如果不需要这个效果,删掉这段代码即可。
收藏本站,已备不时之需吧。
© 版权声明
文章版权归作者所有,未经允许请勿转载,如需转载请附带原文链接 谢谢。
本博客所有文章除特别声明外,均默认采用CC BY-NC-SA 4.0 许可协议
本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
如有侵权 联系邮箱2131456789@qq.com
THE END
暂无评论内容