今天在发布文章的时候,需要在文章内嵌入一个B站视频,使用iframe代码后发现高度无法自适应,如果定义了iframe高度,在PC端是正常的,但是移动端的高度又不正常了,经过查阅很多资料,今天终于解决了这个问题。
解决办法如下:
1、增加CSS样式如下:
.meta-media { position: relative; margin-bottom: 30px; float: left; width: 100%; height: 0; padding-bottom: 75%;}.video { position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
2、给iframe加class 为video,如下:
<iframe src="//player.bilibili.com/player.html?aid=985946126&bvid=BV1ft4y1c7CH&cid=847343270&page=1" frameborder="no" class="video" allowfullscreen="true"> </iframe>
这样两步就解决了,做个记录以备需要的时候查阅。