外链引用哔哩哔哩视频自适应

B站分享使用的的iframe，插入到网页会显得很小，我们给他外部添加一个.bilibili的div

<div class="bilibili">
<iframe src="//player.bilibili.com/player.html?aid=60859044&cid=105906898&page=1" scrolling="auto" border="0" frameborder="1" framespacing="1" allowfullscreen="true"> </iframe>
</div>

然后添加CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/*bilibili*/
.bilibili {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
}

.bilibili iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

这样就可以实现自适应
!!!

<div class="bilibili">