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

B站视频嵌入网站博客文章自适应代码插图

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

这段代码可以使嵌入文章的B站视频自适应div的宽度

<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=视频AID替换&bvid=BV1VN4y1K76x&cid=视频CID替换&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>
<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=视频AID替换&bvid=BV1VN4y1K76x&cid=视频CID替换&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>
<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=视频AID替换&bvid=BV1VN4y1K76x&cid=视频CID替换&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>

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

sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
© 版权声明
THE END
喜欢点个赞支持一下吧
点赞0赏币 分享
Everyone has its disadvantage just like the god bites the apple. the bigger disadvantage you have, the more the god appreciate it.
每个人都会有缺陷,就像被上帝咬过的苹果,有的人缺陷比较大,正是因为上帝特别喜欢他的芬芳
评论交流 抢沙发

请登录后发表评论

    暂无评论内容