B站视频嵌入博客文章的自适应代码
在编辑博客时,需要嵌入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的宽度,效果如下:
document.getElementById(\"spkj\").style.height=document.getElementById(\"spkj\").scrollWidth*0.76+\"px\";
其中的代码:
sandbox=\"allow-top-navigation allow-same-origin allow-forms allow-scripts\"
可以使点击的弹出链接失效,避免外链跳出本站,如果不需要这个效果,删掉这段代码即可。
收藏本站,已备不时之需吧。
THE END