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

B站视频嵌入博客文章的自适应代码-陌路人博客-第1张图片陌路人

陌路人博客(blog.imlr.cn)
用心传递快乐,初心不变。

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

B站视频嵌入博客文章的自适应代码-陌路人博客-第2张图片

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

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

自己替换视频aid即可:



<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"


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


×

感谢您的支持,我们会一直保持!

B站视频嵌入博客文章的自适应代码-陌路人博客- 第4张图片
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:陌路人博客 » B站视频嵌入博客文章的自适应代码
标签: 教程 代码

发表评论

表情

网友评论(0)