文章内插入视频,测试发下,原帖地址

写博客的时候准备插入一个B站视频,发现B站点击分享会提供iframe嵌入视频,直接复制代码

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

添加到了博客里,然而它默认的样式只有很小的一块,还需要手动添加width和height属性,手动设置了固定的宽和高之后,显示正常,本以为大功告成。结果发下移动端边框超出。

于是参考网上资料,有直接修改主题样式的,使之外嵌一个class样式,本站测试失败。尝试多次后,才找到合适的解决办法,使用也非常简单。

全部代码如下:

<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=44020824&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>
<script type="text/javascript">
document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth\*0.76+"px";
</script>

使用方法:

只需替换第一行中的数字ID44020824 即可,所以每次只需插入B站视频av/XXXXXX的数字即可。

Last modification:December 19th, 2019 at 04:52 pm
如果觉得我的文章对你有用,请随意赞赏