iframe嵌入哔哩哔哩Bilibili视频自适应高宽,兼容手机端

今天在发布文章的时候,需要在文章内嵌入一个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>

这样两步就解决了,做个记录以备需要的时候查阅。