WordPress中iframe视频自适应页面大小

最近在文章切入B站视频,遇到了iframe尺寸自适应的问题。
如果直接把B站嵌入代码粘贴到wordpress文章中,视频在PC网页端会显得特别小,不适合观看。如下图:
file
红框内是视频大小,蓝框内是网页剩余的留白空间。可见视频并没有撑满页面。对于视频观看来说,效果很差。

如果设置iframe制定的宽度和高度,PC页面显示显示是正常了,但是手机浏览会发生视频画面溢出的问题。如下图:
file
手机只显示了视频一半的画面,效果也不好。
需要到达的效果是让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倍的宽度。

发表回复