博客中使用iframe标签嵌入B站视频(其它视频同理)调整宽高的问题

  • A+

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

<iframe src="//player.bilibili.com/player.html?aid=38722462&amp;cid=68272342&amp;page=1" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"> </iframe> 

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

后来在手机上浏览发现了问题,视频框架太大了,已经超出了手机的宽度,看来并不能设置成固定数值,然后我把width和height都设置成了100%,这下宽正常了,手机也可以自适应了,但是高还是原来的高度没有变,因为height设置百分比和上一级的标签有关系导致不成功没有效果,遂开始寻找其它方式。历经波折各种实验终于成功了。

解决思路

height的值没法固定,但是width的值已经自适应了,只要根据width的值建立联系求出height的值设置就可以了。

解决办法

1.首先设置width=100%
2.然后给自己的iframe加一个id选择器,名字随便起

<iframe id='spkj' src="//player.bilibili.com/player.html?aid=38722462&cid=68272342&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100% > </iframe>

3.最后在博客中嵌入一段js代码

<script type="text/javascript">
document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px";
</script>

意思就是获取width的值,然后把height的值设置成width的0.76倍,这个数字可以按照你所需要的视频比例进行修改

注意:

1.getElementById后面括号里的值要和前面id设置的对应

2.js代码必须放到iframe标签的后面,否则会找不到元素导致不生效的。

3.支持markdown语法的博客编辑器用!!!把js代码包住就可以嵌入js代码了。

全部代码如下:

<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=38722462&cid=68272342&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>
!!!

 

为了方便浏览,图片放到下面

 

问题解决之前的效果:

 

博客中使用iframe标签嵌入B站视频(其它视频同理)调整宽高的问题



博客中使用iframe标签嵌入B站视频(其它视频同理)调整宽高的问题



 

解决之后的效果:

 

博客中使用iframe标签嵌入B站视频(其它视频同理)调整宽高的问题

yishuihan

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: