最近在文章切入B站视频，遇到了iframe尺寸自适应的问题。
如果直接把B站嵌入代码粘贴到wordpress文章中，视频在PC网页端会显得特别小，不适合观看。如下图：
红框内是视频大小，蓝框内是网页剩余的留白空间。可见视频并没有撑满页面。对于视频观看来说，效果很差。
如果设置iframe制定的宽度和高度，PC页面显示显示是正常了，但是手机浏览会发生视频画面溢出的问题。如下图：
手机只显示了视频一半的画面，效果也不好。
需要到达的效果是让iframe能自动适应页面大小。根据网友提供的方案，我尝试成功，在此分享。
方案源地址：https://tech.mindseed.cn/WordPress/424.html
文章有点长。我总结一下方法。
将B站嵌入代码复制粘贴到wordpress文章编辑器中。
如下是B站嵌入代码：
<iframe src="//player.bilibili.com/player.html?aid=826387504&bvid=BV1Pg4y1c7RD&cid=1138546198&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>再里面加上 id="video" 和 width="100%"
如下是修改后B站嵌入代码：
<iframe id="video" src="//player.bilibili.com/player.html?aid=826387504&bvid=BV1Pg4y1c7RD&cid=1138546198&page=1" width="100%" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>最后在/iframe后加上一段代码，如下所示：
如下是最终修改后B站嵌入代码：
<iframe id="video" src="//player.bilibili.com/player.html?aid=826387504&bvid=BV1Pg4y1c7RD&cid=1138546198&page=1" width="100%" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<script type="text/javascript">document.getElementById("video").style.height=document.getElementById("video").scrollWidth*0.8+"px"</script>这样修改后，视频就能自适应页面大小了。如下引用原作者描述：
iframe的内容变化不大，只是将宽度修改为100%，并为iframe增加了一个名为“video”的id号。
第二段代码才是重中之重，它才是实现自适应的核心。如果只是设置宽度为100%的话，打开窗口是窄窄的一小条，因为高度并没有给定，所以它仍按默认的宽度来，所以需要通过javascript将宽度和高度关联，即高度等于0.8倍的宽度。