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>

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